• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

呀,曾经的我是那么的单纯,天真,粗略的翻了一遍小程序画布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),是矩形区域的左下顶点,那么展示的效果大概就是这样子了:

  

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

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
    热门话题
    阅读排行榜

    扫描微信二维码

    查看手机版网站

    随时了解更新最新资讯

    139-2527-9053

    在线客服(服务时间 9:00~18:00)

    在线QQ客服
    地址:深圳市南山区西丽大学城创智工业园
    电邮:jeky_zhao#qq.com
    移动电话:139-2527-9053

    Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap