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

  小程序canvas绘制渐变色(简单入门)

  一个从上到下的渐变色,就这样实现了(鼓掌,鼓掌!)

上一篇:Navicat连接服务器上的Mysql数据库


下一篇:d3.js 入门指南 - 仪表盘