Canvas填充样式fillStyle

渐变色

线性渐变色：

var grd=context.createLinearGradient(xstart,ystart,xend,yend)

grd.addColorStop(stop,color)

-stop:决定位置

-color:颜色

window.onload=function(){

var canvas = document.getElementById("canvas");
var context=canvas.getContext("2d");

var grd=context.createLinearGradient(0,0,800,800)
grd.addColorStop(0.0,"white")
grd.addColorStop(1.0,"red")
context.fillStyle=grd;
context.fillRect(0,0,800,800)

}

放射渐变色

var grd=context.createRadialGradient(x1,y1,r1,x2,y2,r2)

grd.addColorStop(stop,color)

window.onload=function(){

var canvas = document.getElementById("canvas");
var context=canvas.getContext("2d");

var grd=context.createRadialGradient(100,100,10,100,100,100)
grd.addColorStop(0.0,"white")
grd.addColorStop(1.0,"red")
context.fillStyle=grd;
context.fillRect(0,0,800,800)

}

使用图片、Canvas作为样式

createPattern(img/canvas/vedeo,repeat-style)

repeat-style（重复方式）可取值：

no-repeat

repeat-x

repeat-y

repeat

window.onload=function(){

var canvas = document.getElementById("canvas");
var context=canvas.getContext("2d");

var img = new Image();
img.src="1126788942bffadbcal.jpg";
img.onload=function() {
var pattern = context.createPattern(img, "no-repeat");
context.fillStyle=pattern;
context.fillRect(0, 0, 800, 800)
}
}

window.onload=function(){

var canvas = document.getElementById("canvas");
var context=canvas.getContext("2d");

var myCanvas = document.createElement("canvas");
myCanvas.width=300;
myCanvas.height=300;
var myContent=myCanvas.getContext("2d");
drawStar(myContent,100,100,50,0);

var pattern = context.createPattern(myCanvas, "no-repeat");
context.fillStyle=pattern;
context.fillRect(0, 0, 800, 800)

}