这一节主要讨论fillstyle()的其他设置
线性渐变
var grd=context.createLinearGradient(xstart,ystart,xend,yend)
两个点(xstart,ystart)(xend,yend) 渐变线
grd.addColorStop(stop,color)
stop:浮点值,决定关键色的位置
color:决定关键色是什么颜色
window.onload=function(){
var canvas=document.getElementById('canvas');
canvas.width=800;
canvas.height=800;
var context=canvas.getContext('2d');
var grd=context.createLinearGradient(100,100,400,400)
grd.addColorStop(0.0,'#fff')
grd.addColorStop(1.0,'#000')
context.fillStyle=grd
context.fillRect(100,100,400,400)
}
径向渐变
var grd=context.createRadialGradient(x0,y0,r0,x1,y1,r1)
两个圆(x0,y0,r0)和(x1,y1,r1)之间
grd.addColorStop(stop,color)
其他的和线性渐变是一样的
使用图片、画布或者video
createPattern(img,repeat-style)
使用示例:
var backgroundImage=new Image()
backgroundImage.src="brick-jpg"
var pattern=context.createPattern(backgroundImage,'no-repeat')
context.fillStyle=pattern
context.fillRect(100,100,400,400)