小程序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），是矩形区域的左下顶点，那么展示的效果大概就是这样子了：

　　

　　一个从上到下的渐变色，就这样实现了（鼓掌，鼓掌！）