前端Canvas入门——一些注意事项

创建渐变的三种方法：

createLinearGradient() - 线性渐变

createRadialGradient() - 径向渐变（放射性渐变）

createConicGradient() - 锥形渐变

这三种的核心观点都是：

创建一个gradient对象，然后调用addColorStop()方法给这个对象添加渐变色。

区别就是里面的形参数量、含义不一样，需要注意。

有个特别需要注意的点：

createPattern()  - 图片画笔

你可以理解为这个方法就是创建一个新的画笔工具，然后使用这个工具去进行绘画。

举个例子：

        let img = new Image()
        img.src = './images/5.png'
 
        img.onload = () => {
            // 创建重复元素对象 - repeat是CSS中的内容
            let png = ctx.createPattern(img, 'repeat')
            
            // 类似于一个画笔
            ctx.fillStyle = png
 
            ctx.fillRect(0, 0, 400, 400)
        }

---

这几个方法你可以想象成创建一个画笔。

不同的是，有些是创建的时候就限制了画笔的大小。

比如说，createLinerGradient()里面就有关于生效的距离：

        const gradient = ctx.createLinearGradient(0, 0, 600, 400)
        gradient.addColorStop(0, 'red')
        gradient.addColorStop(0.5, 'yellow')
        gradient.addColorStop(1, 'blue')
 
        ctx.moveTo(0, 0)
        ctx.lineTo(400, 400)
        ctx.lineWidth = 30
        ctx.strokeStyle = gradient
        ctx.stroke()

 

从上面的例子可以看出，如果你的线条长度小于渐变色的宽度（上文中渐变色的宽度是600，但是线条的宽度是400），那么渐变色有可能显示不全——丢失部分/全部蓝色渐变效果。

这是因为在gradient对象方法——addColorStop(0, '颜色')里面的0是指向量的长度，它的长度是这个向量跟下一个向量之间的长度。

比如说例子中的就是0-0.5之间就是从红色渐变到黄色，而0.5-1之间就是从黄色渐变到蓝色。

---

而有些则是不限制大小，只看你后续使用画笔来干什么。

比如说，例子1中的createPattern()就是看后续调用fillRect()的大小。

但如果你使用的是stroke()方法，就只会剩下一个边框：

今天就到这，bye~