前端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 = pngctx.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 = 30ctx.strokeStyle = gradientctx.stroke()
从上面的例子可以看出，如果你的线条长度小于渐变色的宽度（上文中渐变色的宽度是600，但是线条的宽度是400），那么渐变色有可能显示不全——丢失部分/全部蓝色渐变效果。
这是因为在gradient对象方法——addColorStop(0, '颜色')里面的0是指向量的长度，它的长度是这个向量跟下一个向量之间的长度。
比如说例子中的就是0-0.5之间就是从红色渐变到黄色，而0.5-1之间就是从黄色渐变到蓝色。
而有些则是不限制大小，只看你后续使用画笔来干什么。
比如说，例子1中的createPattern()就是看后续调用fillRect()的大小。
但如果你使用的是stroke()方法，就只会剩下一个边框：
今天就到这，bye~