/簡體中文/
/中文/
/中文/
/中文/
/中文/
/中文/
/中文/
/中文/
/中文/
/中文/
HTML Fader是一個很小的工具,或者更準確的說,它是一個HTML代碼插件程序,功能呢個只有一個,就是通過HTML Fader,你可以在HTML輕松制作色彩漸變效果,而不需要記住那么繁瑣的代碼,它可以應用在你的網(wǎng)頁的標題和文本內(nèi)容。程序包含了一個基本的設計接口,你必須設置漸變色值(對應RGB的值)和文字。之后,你就可以點擊生成HTML頁面了,復制相關的代碼到你的網(wǎng)頁編輯頁面中,那么,效果立刻就能顯示出來。
與HTML推子您可以輕松地創(chuàng)建HTML花哨的顏色漸變效果,適用于您的網(wǎng)頁的標題和文本。該方案采用的基本設計中,你必須同時引進灰度顏色值(RGB)和文本的界面。
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>漸變</title>
<script language="javascript" type="text/javascript">
window.onload=function(){
var mycan=document.getElementById("myCanvas");
var canxt=mycan.getContext("2d");
//在一個矩形中嘗試做漸變
var mylinear=canxt.createLinearGradient(0,0, 150,50);// 創(chuàng)建一個線性漸變
mylinear.addColorStop(0,"red");
mylinear.addColorStop(0.5,"yellow");
mylinear.addColorStop(1,"green");
// 把漸變對象賦值給fillstyle,理解(和填充顏色聯(lián)系起來,這里不同的就是純色用漸變對象取代了,我們還是在對canxt操作),關鍵
canxt.fillStyle=mylinear;
//繪制矩形
canxt.fillRect(0,0,150,50);//必不可少
//為文字創(chuàng)建一個漸變
var linearText=canxt.createLinearGradient(300,50,600,50);
linearText.addColorStop(0,"yellow");
linearText.addColorStop(0.5,"grey");
linearText.addColorStop(1,"red");
canxt.fillStyle=linearText;
canxt.font="30px Arial";
canxt.textBaseline="top";//文字對齊方式,在canxt中,要看實際效果
canxt.fillText("Linear canxt!!",300,50);//參數(shù)表示文字x,y軸的位置
// 對角線上的漸變
var fillColordiagonal = canxt.createLinearGradient(50,200, 100,450);
// 漸變顏色
fillColordiagonal.addColorStop(0.2,"red");
fillColordiagonal.addColorStop(0.4,"black");
fillColordiagonal.addColorStop(0.6,"green");
fillColordiagonal.addColorStop(0.75,"yellow");
// 把漸變對象賦值給fillstyle
canxt.fillStyle= fillColordiagonal;
// 繪制矩形
canxt.fillRect(50,225, 100,250);
// 繪制徑向漸變
fillColorRadial = canxt.createRadialGradient(450,300,0, 450,300,200);
//徑向漸變——createradialGradient(x0,y0,r0,x1,y1,r1)——使用六個參數(shù)以一種圓形或是圓錐形的模式來組合兩種或多種顏色。
//1. (x0,y0): 圓錐的第一個圓的中心
//2. r0:第一個圓的半徑
//3. (x1,y1):圓錐的第二個圓的中心
//4. r1:第二個圓的半徑
fillColorRadial.addColorStop(0, "red");
fillColorRadial.addColorStop(0.2, "black");
fillColorRadial.addColorStop(0.4, "green");
fillColorRadial.addColorStop(0.7, "yellow");
canxt.fillStyle = fillColorRadial;
canxt.rect(300,200,500,400);
canxt.fill();
}
</script>
</head>
<body>
<p><canvas id="myCanvas" width="600" height="400"></canvas></p>
</body>
</html>
關于騰牛 | 聯(lián)系方式 | 發(fā)展歷程 | 版權聲明 | 下載幫助(?) | 廣告聯(lián)系 | 網(wǎng)站地圖 | 友情鏈接
Copyright 2005-2022 QQTN.com 【騰牛網(wǎng)】 版權所有 鄂ICP備2022005668號-1 | 鄂公網(wǎng)安備 42011102000260號
聲明:本站非騰訊QQ官方網(wǎng)站 所有軟件和文章來自互聯(lián)網(wǎng) 如有異議 請與本站聯(lián)系 本站為非贏利性網(wǎng)站 不接受任何贊助和廣告