微信小程序基于canvas渐变实现的彩虹效果示例


Posted in Javascript onMay 03, 2019

本文实例讲述了微信小程序基于canvas渐变实现的彩虹效果。分享给大家供大家参考,具体如下:

微信小程序提供了两种渐变的方式:

    createLinearGradient(x,y,x1,y1)创建一个线性的渐变。

        x,y           起点坐标

        x1,y1        终点坐标

    createCircularGradient(x,y,r)创建一个从圆心开始的渐变。

        x,y            圆心坐标

        r                 半径

创建了渐变对象之后,必须添加两个或者两个以上的渐变点;

addColorStop(position, color)方法用于指定颜色渐变点的位置和颜色,位置必须位于0到1之间。

一般用setFillStyle()来设置渐变,然后进行画图描述。

使用 createLinearGradient()

const ctx = wx.createCanvasContext('myCanvas')
// Create linear gradient
const grd = ctx.createLinearGradient(0,120, 120, 0)
grd.addColorStop(0, '#FFFF00')
grd.addColorStop(1, '#FF0000')
// Fill with gradient
ctx.setFillStyle(grd);//将渐变色渲染入正方形
ctx.fillRect(20, 20, 120, 120);//起点坐标为(20,20),长宽都为120px的正方形
ctx.draw();

微信小程序基于canvas渐变实现的彩虹效果示例

使用 createCircularGradient()

const ctx = wx.createCanvasContext('myCanvas')
// Create circular gradient
const grd = ctx.createCircularGradient(170, 170, 150);
grd.addColorStop(0.79, '#fff')
grd.addColorStop(0.81, '#8B00FF')
grd.addColorStop(0.83, '#0000FF')
grd.addColorStop(0.85, '#00FFFF')
grd.addColorStop(0.87, '#00FF00')
grd.addColorStop(0.89, '#FFFF00')
grd.addColorStop(0.93, '#FF7F00')
grd.addColorStop(0.95, '#FF0000')
grd.addColorStop(1, '#fff')
// Fill with gradient
ctx.setFillStyle(grd)//将渐变色渲染入矩形
ctx.fillRect(20, 20, 300,120)//起点坐标为(20,20),长300px宽120px的矩形
ctx.draw()

微信小程序基于canvas渐变实现的彩虹效果示例

补充:addColorStop的position为渐变点的位置,该位置是颜色设置的最中心处。

该文如有描述不当,烦请各位道友指摘。

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
javascript 处理事件绑定的一些兼容写法
Dec 24 Javascript
js页面跳转常用的几种方式
Nov 25 Javascript
基于jQuery的试卷自动排版系统实现代码
Jan 06 Javascript
中文字符串截取的js函数代码
Apr 17 Javascript
js 遍历json返回的map内容示例代码
Oct 29 Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
Oct 29 Javascript
web前端开发中常见的多列布局解决方案整理(一定要看)
Oct 15 Javascript
JS实现的找零张数最小问题示例
Nov 28 Javascript
使用vue的transition完成滑动过渡的示例代码
Jun 25 Javascript
基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例
Aug 27 Javascript
详解Vscode中使用Eslint终极配置大全
Nov 08 Javascript
vue2路由方式--嵌套路由实现方法分析
Mar 06 Javascript
微信小程序实现的canvas合成图片功能示例
May 03 #Javascript
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
May 03 #Javascript
axios封装,使用拦截器统一处理接口,超详细的教程(推荐)
May 02 #Javascript
JavaScript中的垃圾回收与内存泄漏示例详解
May 02 #Javascript
详解微信小程序缓存--缓存时效性
May 02 #Javascript
详解如何使用router-link对象方式传递参数?
May 02 #Javascript
详解Vue底部导航栏组件
May 02 #Javascript
You might like
ajax php 实现写入数据库
2009/09/02 PHP
php中的观察者模式
2010/03/24 PHP
CI框架整合smarty步骤详解
2016/05/19 PHP
PHP中使用CURL发送get/post请求上传图片批处理功能
2018/10/15 PHP
在js中使用"with"语句中跨frame的变量引用问题
2007/03/08 Javascript
js post方式传递提交的实现代码
2010/05/31 Javascript
JS继承--原型链继承和类式继承
2013/04/08 Javascript
JQuery 操作/获取table具体代码
2013/06/13 Javascript
Jquery中LigerUi的弹出编辑框(实现方法)
2013/07/09 Javascript
jquery next nextAll nextUntil siblings的区别介绍
2013/10/05 Javascript
使用时间戳解决ie缓存的问题
2014/08/20 Javascript
js实现超简单的展开、折叠目录代码
2015/08/28 Javascript
JavaScript编程学习技巧汇总
2016/02/21 Javascript
Jquery实现的简单轮播效果【附实例】
2016/04/19 Javascript
简单实现js无缝滚动效果
2017/02/05 Javascript
axios中cookie跨域及相关配置示例详解
2017/12/20 Javascript
简单理解Vue中的nextTick方法
2018/01/30 Javascript
详解Vue CLI3配置解析之css.extract
2018/09/14 Javascript
微信小程序开发问题之wx.previewImage
2018/12/25 Javascript
微信小程序导航栏跟随滑动效果的实现代码
2019/05/14 Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
2019/11/06 Javascript
微信小程序批量上传图片到七牛(推荐)
2019/12/19 Javascript
vue 图片裁剪上传组件的实现
2020/11/12 Javascript
[01:52]2014DOTA2西雅图邀请赛 V社开大会你不知道的小秘密
2014/07/08 DOTA
全面了解Python环境配置及项目建立
2016/06/30 Python
python+influxdb+shell编写区域网络状况表
2018/07/27 Python
Python3使用 GitLab API 进行批量合并分支
2020/10/15 Python
瑞贝卡·明可弗包包官网:Rebecca Minkoff
2016/07/21 全球购物
Timberland澳大利亚官网:全球领先的户外品牌
2019/12/10 全球购物
网络维护管理员的自我评价分享
2013/11/11 职场文书
实验室的标语
2014/06/20 职场文书
优秀护士事迹材料
2014/12/25 职场文书
英文辞职信范文
2015/05/13 职场文书
创业计划书之农家乐
2019/10/09 职场文书
Python3.10的一些新特性原理分析
2021/09/15 Python
MySQL 原理与优化之Limit 查询优化
2022/08/14 MySQL