HTML5 Canvas之填充样式

时间:2021-04-04 17:14:17

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

HTML5 Canvas之填充样式

径向渐变

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)