HTML5 Canvas之填充样式

这一节主要讨论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)