微信小程序基于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 相关文章推荐
jQuery asp.net 用json格式返回自定义对象
Apr 07 Javascript
window.open关于浏览器拦截问题分析及解决方法
Feb 05 Javascript
Js控制弹窗实现在任意分辨率下居中显示
Aug 01 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
Jan 12 Javascript
javascript获取wx.config内部字段解决微信分享
Mar 09 Javascript
简单实现bootstrap选项卡效果
Feb 08 Javascript
js代码延迟一定时间后执行一个函数的实例
Feb 15 Javascript
Linux CentOS系统下安装node.js与express的方法
Apr 01 Javascript
js实现按座位号抽奖
Apr 05 Javascript
微信小程序 ES6Promise.all批量上传文件实现代码
Apr 14 Javascript
webpack4的迁移的使用方法
May 25 Javascript
微信小程序实现下拉加载更多商品
Dec 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简单的会话类代码
2011/08/08 PHP
7个鲜为人知却非常实用的PHP函数
2015/07/01 PHP
php array_merge_recursive 数组合并
2016/10/26 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
javascript的原生方法获取数组中的最大(最小)值
2012/12/19 Javascript
Tab切换组件(选项卡功能)实例代码
2013/11/21 Javascript
深入理解JSON数据源格式
2014/01/10 Javascript
JS(JQuery)操作Array的相关方法介绍
2014/02/11 Javascript
js 赋值包含单引号双引号问题的解决方法
2014/02/26 Javascript
Javascript学习笔记之 函数篇(二) : this 的工作机制
2014/06/24 Javascript
node.js中的fs.chmodSync方法使用说明
2014/12/18 Javascript
jQuery幻灯片特效代码分享--鼠标滑过按钮时切换(2)
2020/11/18 Javascript
浅析javascript的return语句
2015/12/15 Javascript
基于jquery实现下拉框美化特效
2016/02/02 Javascript
Js 获取当前函数参数对象的实现代码
2016/06/20 Javascript
用v-html解决Vue.js渲染中html标签不被解析的问题
2016/12/14 Javascript
JavaScript中利用for循环遍历数组
2017/01/15 Javascript
react-native DatePicker日期选择组件的实现代码
2017/09/12 Javascript
使用Vue制作图片轮播组件思路详解
2018/03/21 Javascript
vue 取出v-for循环中的index值实例
2019/11/09 Javascript
Python创建xml文件示例
2017/03/22 Python
python爬虫入门教程--快速理解HTTP协议(一)
2017/05/25 Python
Python KMeans聚类问题分析
2018/02/23 Python
python爬虫开发之Beautiful Soup模块从安装到详细使用方法与实例
2020/03/09 Python
Django通过json格式收集主机信息
2020/05/29 Python
scrapy框架携带cookie访问淘宝购物车功能的实现代码
2020/07/07 Python
Pytorch模型迁移和迁移学习,导入部分模型参数的操作
2021/03/03 Python
美国在线眼镜店:GlassesShop
2018/11/15 全球购物
英国当代时尚和街头服饰店:18montrose
2018/12/15 全球购物
PHP开发的一般流程
2013/08/13 面试题
如果让你测试一台高速激光打印机,你都会进行哪些测试
2012/12/04 面试题
预备党员转正思想汇报
2014/01/12 职场文书
学习经验交流会主持词
2014/04/01 职场文书
素质教育培训心得体会
2016/01/19 职场文书
公证书
2019/04/17 职场文书
动画电影《擅长捉弄人的高木同学》6月10日上映!
2022/03/20 日漫