玩转canvas之封装设置渐变色

设置渐变色

代码

class EasyCanvas{
	// 设置环形渐变色
	radialGradient(x1,y1,r1,x2,y2,r2,color){
		// x1,y1,r1分别是起始圆的中心点与半径
		// x2,y2,r2分别是结束圆的中心点与半径
		// color是用于设置渐变色
		let grd = this.ctx.createRadialGradient(x1,y1,r1,x2,y2,r2)
		let len = color.length
		for(let i = 0; i < len; i++){
		  let c = color[i]
		  grd.addColorStop(c.stop, c.color)
		}
		return grd
	}
	// 设置线性渐变色
	linearGradient(x1,y1,x2,y2,color){
		// x1,y1是起始点位置
		// x2,y2是结束点位置
		// color是用于设置渐变色
		let grd = this.ctx.createLinearGradient(x1,y1,x2,y2)
		let len = color.length
		// 通过for循环设置渐变停止位置与对应颜色
		for(let i = 0; i < len; i++){
		  let c = color[i]
		  grd.addColorStop(c.stop, c.color)
		}
		return grd
	}
}

color是一个对象数组，用于规定渐变对象中的颜色和停止位置

let color = [
	{
		stop: 0, 
		color: 'red'
	},
	{
		stop: 1,
		color: 'green'
	}
]

使用示例

let ecav6 = new EasyCanvas(document.getElementById('gradient'))
let color = [{
    stop: 0,
    color: '#892091'
  },{
    stop: 0.5,
    color: '#849023'
  },{
    stop: 1,
    color: '#803020'
  }]
let rg = ecav6.radialGradient(50,50,10,60,60,50,color)
let lg = ecav6.linearGradient(130,10,180,180,color)
ecav6.begin()
.rect(10,10,100,100)
.fill(rg)
.begin()
.rect(130,10,50,50)
.fill(lg)

图像

总结

渐变色的使用并不困难，但与之前的方法不同，这两个方法返回的不是this，而是渐变色对象，因为我们需要获取这个创建的渐变色对象，并将这个对象传入到填充方法的color变量中，才可进行填充。