如果您學(xué)習(xí)過之前的Css屬性有關(guān)漸變的兩講，你會(huì)覺得很親切的，因?yàn)樵趆tml5里他們的名稱是一樣的。

我們一起來看代碼注釋講解

線性漸變語法

createLinearGradient(xStart,yStart,xEnd,yEnd);
漸變起點(diǎn)橫坐標(biāo)：xStart，縱坐標(biāo)：yStart；
漸變終點(diǎn)橫坐標(biāo)：xEnd，縱坐標(biāo)：yEnd；

來給漸變加入至少2個(gè)的Stop點(diǎn)吧
addColorStop(offset,color)
offset為0到1的浮點(diǎn)值，來定義漸變偏移量
color可支持16進(jìn)制、rgb、rgba顏色

徑向漸變語法

CreateRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd);
開始圓心橫坐標(biāo)：xStart，縱坐標(biāo)：yStart，半徑：radiusStart；
結(jié)束圓心橫坐標(biāo)：xEnd，縱坐標(biāo)：yEnd，半徑：radiusEnd；

addColorStop(offset,color)
offset為0到1的浮點(diǎn)值，來定義漸變偏移量
color可支持16進(jìn)制、rgb、rgba顏色

[javascript]

//得到畫布上下文，上節(jié)已講，在此不多說
var wh = document.getElementById("canvas");
function draw() {
canvas = document.getElementById("canvas");
if (canvas.getContext) { //檢測(cè)瀏覽器是否兼容
ctx = canvas.getContext("2d"); //你的canvas代碼在這里
return ctx;
}
return null;
}
/*我們用這個(gè)方法來創(chuàng)建線性漸變
createLinearGradient(xStart,yStart,xEnd,yEnd);
漸變起點(diǎn)橫坐標(biāo)：xStart，縱坐標(biāo)：yStart；
漸變終點(diǎn)橫坐標(biāo)：xEnd，縱坐標(biāo)：yEnd；

來給漸變加入至少2個(gè)的Stop點(diǎn)吧
addColorStop(offset,color)
offset為0到1的浮點(diǎn)值，來定義漸變偏移量
color可支持16進(jìn)制、rgb、rgba顏色
*/
function CreateLinearGradient() {
var canvas = draw();
var grd = canvas.createLinearGradient(0, 0, 175, 50);
//支持這么多種的顏色定義方式
grd.addColorStop(0, "#9CAAC1");
grd.addColorStop(0.3, "black");
grd.addColorStop(0.6, "rgb(255,255,0)");
grd.addColorStop(1, 'rgba(255,0,0,0.3)');
canvas.fillStyle = grd;
canvas.fillRect(0, 0, 275, 50);
}
/*再來一個(gè)徑向漸變吧
CreateRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd);
開始圓心橫坐標(biāo)：xStart，縱坐標(biāo)：yStart，半徑：radiusStart；
結(jié)束圓心橫坐標(biāo)：xEnd，縱坐標(biāo)：yEnd，半徑：radiusEnd；

addColorStop(offset,color)
offset為0到1的浮點(diǎn)值，來定義漸變偏移量
color可支持16進(jìn)制、rgb、rgba顏色
*/
function CreateRadialGradient() {
var canvas = draw();
canvas.strokeStyle = "blue";
canvas.lineWidth = 2;
canvas.beginPath();
var grd = canvas.createRadialGradient(120, 220, 0, 120, 220, 90);
grd.addColorStop(0, "#9CAAC1");
grd.addColorStop(0.3, "black");
grd.addColorStop(0.6, "rgb(255,255,0)");
grd.addColorStop(1, 'rgba(255,0,0,0.3)');
canvas.fillStyle = grd;
//arc(x,y,radius[半徑],startAngle[開始弧度],endAngle[結(jié)束弧度],anticlockwise[true順時(shí)針繪制,false逆時(shí)針繪制])
canvas.arc(120, 220, 100, 0, 2 * Math.PI, true);
canvas.closePath();
canvas.stroke();
canvas.fill();
}
/*最后看一個(gè)基本方法，擦除
clearRect(x,y,width,heigth);要擦除以x，y坐標(biāo)為起點(diǎn)，width,heigth為長寬的矩形區(qū)域里的內(nèi)容
*/
function Ca() {
var canvas = draw();
canvas.clearRect(0, 0, wh.width, wh.height);
}

[/javascript]

易勢(shì)科技，專注于軟件定制開發(fā)。