微信小程序基于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 相关文章推荐
prettify 代码高亮着色器google出品
Dec 28 Javascript
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
Mar 05 Javascript
jquery实现div阴影效果示例代码
Sep 16 Javascript
Javascript中的关键字和保留字整理
Oct 16 Javascript
png在IE6 下无法透明的解决方法汇总
May 21 Javascript
JS实现的N多简单无缝滚动代码(包含图文效果)
Nov 06 Javascript
Angular2 (RC5) 路由与导航详解
Sep 21 Javascript
简单谈谈ES6的六个小特性
Nov 18 Javascript
JS通过调用微信API实现微信支付功能的方法示例
Jun 29 Javascript
详解webpack loader和plugin编写
Oct 12 Javascript
vue中组件的3种使用方式详解
Mar 23 Javascript
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
Jun 29 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
PHP开发框架总结收藏
2008/04/24 PHP
PHP批量生成缩略图的代码
2008/07/19 PHP
setcookie中Cannot modify header information-headers already sent by错误的解决方法详解
2013/05/08 PHP
php生成html文件方法总结
2014/12/01 PHP
Fleaphp常见函数功能与用法示例
2016/11/15 PHP
Ajax一统天下之Dojo整合篇
2007/03/24 Javascript
jQuery MD5加密实现代码
2010/03/15 Javascript
JavaScript 放大镜 移动镜片效果代码
2011/05/09 Javascript
JavaScript初学者应注意的七个细节小结
2012/01/30 Javascript
javascript 基础篇4 window对象,DOM
2012/03/14 Javascript
Js使用WScript.Shell对象执行.bat文件和cmd命令
2014/12/18 Javascript
jQuery解析XML文件同时动态增加js文件的方法
2015/06/01 Javascript
js 动态给元素添加、移除事件的实现方法
2016/07/19 Javascript
javascript获取网页各种高宽及位置的方法总结
2016/07/27 Javascript
原生JS简单实现ajax的方法示例
2016/11/29 Javascript
Vue.JS入门教程之自定义指令
2016/12/08 Javascript
js实现交通灯效果
2017/01/13 Javascript
js+html5实现半透明遮罩层弹框效果
2020/08/24 Javascript
JavaScript设计模式之装饰者模式实例详解
2019/01/17 Javascript
vuex实现的简单购物车功能示例
2019/02/13 Javascript
AJAX XMLHttpRequest对象创建使用详解
2020/08/20 Javascript
[03:09]显微镜下的DOTA2第一期——带你走进华丽的DOTA2世界
2014/06/20 DOTA
Python获取Windows或Linux主机名称通用函数分享
2014/11/22 Python
Python运算符重载用法实例
2015/05/28 Python
Python爬虫DOTA排行榜爬取实例(分享)
2017/06/13 Python
Python 3中print函数的使用方法总结
2017/08/08 Python
python中numpy.zeros(np.zeros)的使用方法
2017/11/07 Python
python dataframe 输出结果整行显示的方法
2018/06/14 Python
Python异常处理操作实例详解
2018/08/28 Python
linux系统下pip升级报错的解决方法
2021/01/31 Python
如何进行Linux分区优化
2016/09/13 面试题
中学生打架检讨书
2014/02/10 职场文书
房地产广告策划方案
2014/05/15 职场文书
2014年十八届四中全会思想汇报范文
2014/10/17 职场文书
2016大学生入党积极分子心得体会
2016/01/06 职场文书
基于Android10渲染Surface的创建过程
2022/08/14 Java/Android