createLinearGradient() 創(chuàng)建線性漸變岔擂，用在畫布內(nèi)容上
createLinearGradient()
var c = document.getElementById('mycanvas');
var ctx = c.getContext('2d');
var grd = ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"yellow");
grd.addColorStop(1,"green");
ctx.fillStyle = grd;
ctx.fillRect(20,20,150,100);
createPattern(image,"repeat|repeat-x|repeat-y|no-repeat") 在指定方向上重復(fù)指定的元素
createPattern()
<canvas id="mycanvas2" width="300" height="200"></canvas>
var c2=document.getElementById("mycanvas2");
var ctx2=c2.getContext("2d");
var img=document.getElementById("lamp");
img.onload = function(){
var pat=ctx2.createPattern(img,'repeat');
ctx2.rect(10,10,150,100);
ctx2.fillStyle=pat;
ctx2.fill();
}
createRadialGradient()創(chuàng)建放射狀/環(huán)形的漸變督禽，用在畫布內(nèi)容上
createRadialGradient()
var c3 = document.getElementById('mycanvas3');
var ctx3 = c3.getContext('2d');
//context.createRadialGradient(x0,y0,r0,x1,y1,r1);
/* x0 漸變的開(kāi)始圓的 x 坐標(biāo)
y0 漸變的開(kāi)始圓的 y 坐標(biāo)
r0 開(kāi)始圓的半徑
x1 漸變的結(jié)束圓的 x 坐標(biāo)
y1 漸變的結(jié)束圓的 y 坐標(biāo)
r1 結(jié)束圓的半徑*/
var grd3 = ctx3.createRadialGradient(85,60,5,90,80,120);
grd3.addColorStop(0,"red");
grd3.addColorStop(1,"white");
ctx3.fillStyle=grd3;
ctx3.fillRect(10,10,170,120);
addColorStop() 規(guī)定漸變對(duì)象中的顏色和停止位置
addColorStop()
var c4 = document.getElementById('mycanvas4');
var ctx4 = c4.getContext('2d');
var grd4 = ctx4.createLinearGradient(0,0,170,0);
//gradient.addColorStop(stop,color);
//stop 介于 0.0 與 1.0 之間的值雅任，表示漸變中開(kāi)始與結(jié)束之間的位置澄峰。
//color 在結(jié)束位置顯示的 CSS 顏色值
grd4.addColorStop(0,"red");
grd4.addColorStop(1,"white");
ctx4.fillStyle = grd4;
ctx4.fillRect(10,10,180,100)