正文
小程序canvas绘制渐变色（简单入门）
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
呀，曾经的我是那么的单纯，天真，粗略的翻了一遍小程序画布API，没有看见渐变色，就以为不支持渐变色
于是在项目中直接把原本的渐变色换成了单一颜色展示，发现很low啊
但是，自从上次小程序API文档更新了以后，我突然看见了设置渐变色的api，以为是小程序开窍了，决定支持渐变色的使用了
哎呀，于是就去测试，但是尴尬的发现没有例子并不会食用，就只能去万能的社区百度了呗
emmm这一百度才发现，原理渐变色早就有了吗！（原来单纯的只是我眼瞎）
好吧，然后跟着社区前辈的经验一点一点摸索，也算是大概知道这东西该怎么使用了
下面说步骤：
1. 创建绘图上下文（就无耻的借用官方的啦）
var ctx = wx.createCanvasContext('firstCanvas')
2. 创建渐变色（重点来了）
let grd = ctx.createLinearGradient(0, 200, 0, 260)
这里解释一下：createLinearGradient（）绘制的渐变色的起始坐标并不是画布的原点...而是你想要填充的起点坐标
观众：请说人话！谢谢
说的通俗一点，就是你想要在画布的那一块区域使用这个渐变色，那么那块区域的其中一个顶点，就是你绘制渐变色的起点（终点）
比如说下面的案例：
grd.addColorStop(0, 'rgba(255, 255, 255, 0)')
grd.addColorStop(1, 'rgba(0, 255, 0, 0.2)') ctx.setFillStyle(grd)
ctx.fillRect(0, 200, 260, 60)
ctx.draw()
addColorStop（）就先不说了，看下面的fillRect（）是创建一个矩形区域，那么很明显我的渐变色是要用在这个区域里面的
那么渐变色的起点（终点）就很明显了，这里我是将起点设置在（0，200）这个位置，刚好就是矩形区域的左上角顶点，
终点是（0，260），是矩形区域的左下顶点，那么展示的效果大概就是这样子了：
一个从上到下的渐变色，就这样实现了（鼓掌，鼓掌！）
