canvas渐变色 - Kaiqisan

canvas渐变色

一般用于在使用填充方法的时候使用，是一种特殊的填充，因为它是渐变色的。

关键代码

createLinearGradient(x1, y1, x2, y2): 这里创建一个渐变的样式，定义了渐变的整体走向，x1, y1是渐变的开始点，x2, y2是渐变的结束点。

addColorStop(step, color): 设置渐变的颜色和颜色的变化,第一个参数值为0–1任意值，为渐变路线0为渐变起点，1为渐变终点。如果对于路径不是很理解的话我们建议您复制粘贴下面的代码然后自己修改参数写一遍。如果您做过css动画的话就会对这个0–1拥有更好的理解

let gra = ctx.createLinearGradient(0, 0, 0, 300) // 创建一个渐变样式
gra.addColorStop(0, '#ffffff') // path
// ....
gra.addColorStop(0.5, 'blue')
// ....
gra.addColorStop(1, 'lightpink')
ctx.fillStyle = gra // 最后通过fillStyle的形式填充
// 后面请任意使用填充方法。

下图可以让您更容易理解渐变的具体细节，请谨慎大胆地使用它（不是）。

createRadialGradient(x1, y1, r1, x2, y2, r2): 中心辐射渐变,它的渐变可以看做从一个点开始向周围变换颜色。这里前三个参数表示渐变起始圆的信息，分别为x坐标，y坐标，半径，后三个参数表示终止圆的信息。

这里的参数填写是有讲究的，一般我们都是使两个圆的圆心相互重合，这样绘制出来的才是正宗的中心辐射渐变

如果出现两个圆心不相等的情况的时候，有可能绘制出来的图案会并不符合我们的预期，下面我们就从原理的角度开始分析。

两个圆如果圆心不一样，它们具有以下关系-----相切，相交，相离和包含关系。下面我们在绘制渐变色图的时候再额外绘制两个参考圆的边框。

包含


包含关系，如果起始圆比结束圆小，渐变从起始圆向周围辐射，直到结束圆结束为止。如果起始圆比结束圆大，渐变就从结束圆开始向周围辐射，直到起始圆为止

相交


从相交开始，渐变就不载是理想的了，而是如图所示的渐变，建议谨慎使用。

相切


本质上和相交是一样的，都是找到两条和两个圆共同相切的直线，然后开始在上图范围内开始渐变。

相离


本质和相交相切一样，不多赘述，看图理解。

源码

	window.onload = () => {
        let canvas = document.getElementById('demo')
        let ctx = canvas.getContext('2d')
		// ctx.save()
		// let gra = ctx.createLinearGradient(0, 0, 500, 300)
		// gra.addColorStop(0, '#FFF2B1')
		// gra.addColorStop(1, '#F59AFF')
		// ctx.fillStyle = gra
		// ctx.fillRect(0, 0, 500, 300)
		// ctx.restore()

		ctx.beginPath()
		// 放射状圆形渐变，由两个参考圆的半径和位置关系共同决定
		ctx.save()
		let gra2 = ctx.createRadialGradient(400, 200, 50, 400, 220, 80)
		gra2.addColorStop(0, '#FFF2B1')
		gra2.addColorStop(1, '#F59AFF')
		ctx.fillStyle = gra2
		ctx.fillRect(0, 0, 1000, 600)
		ctx.restore()

        // 绘制参考圆，可供大家测试
		// ctx.save()
		// ctx.beginPath()
		// ctx.arc(400, 200, 50, 0, 2 * Math.PI,)
		// ctx.stroke()
		//
		// ctx.save()
		// ctx.beginPath()
		// ctx.arc(400, 220, 80, 0, 2 * Math.PI,)
		// ctx.stroke()
    }

总结

渐变是个很好玩的东西，在某些绘制中会有意想不到的结果，也建议后面的辐射绘制把起始圆和终止圆的圆心重合一下，除非你就是想绘制那样的效果的话当我没说！