微信小程序基于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 相关文章推荐
让网页根据不同IE版本显示不同的内容
Feb 08 Javascript
JS 文件大小判断的实现代码
Apr 07 Javascript
一个简单的js鼠标划过切换效果
Jun 30 Javascript
19个很有用的 JavaScript库推荐
Jun 27 Javascript
JSON+Jquery省市区三级联动
Jan 13 Javascript
EasyUI创建对话框的两种方式
Aug 23 Javascript
基于JavaScript实现随机颜色输入框
Dec 10 Javascript
JavaScript实现动态添加Form表单元素的方法示例
Aug 14 Javascript
JS手机端touch事件计算滑动距离的方法示例
Oct 26 Javascript
Nuxt使用Vuex的方法示例
Sep 06 Javascript
js实现表格单列按字母排序
Aug 12 Javascript
如何通过Proxy实现JSBridge模块化封装
Oct 22 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新手谈谈我的学习心得
2007/02/25 PHP
php模板之Phpbean的目录结构
2008/01/10 PHP
解决phpmyadmin中缺少mysqli扩展问题的方法
2013/05/06 PHP
linux中cd命令使用详解
2015/01/08 PHP
PHP实现页面静态化的超简单方法
2016/09/06 PHP
PHP小白必须要知道的php基础知识(超实用)
2017/10/10 PHP
统计PHP目录中的文件数方法
2019/03/05 PHP
Packer 3.0 JS压缩及混淆工具 下载
2007/05/03 Javascript
几个比较经典常用的jQuery小技巧
2010/03/01 Javascript
js 分页全选或反选标识实现代码
2011/08/09 Javascript
js显示时间 js显示最后修改时间
2013/01/02 Javascript
js改变img标签的src属性在IE下没反应的解决方法
2013/07/23 Javascript
为何JS操作的href都是javascript:void(0);呢
2015/11/12 Javascript
jQuery图片轮播实现并封装(一)
2016/12/03 Javascript
jQuery实现简单的滑动导航代码(移动端)
2017/05/22 jQuery
什么是Vue.js框架 为什么选择它?
2017/10/17 Javascript
浅谈vuepress 踩坑记
2018/04/18 Javascript
详解vue使用vue-layer-mobile组件实现toast,loading效果
2018/08/31 Javascript
JAVA面试题 static关键字详解
2019/07/16 Javascript
Nodejs技巧之Exceljs表格操作用法示例
2019/11/06 NodeJs
[49:27]LGD vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python 处理string到hex脚本的方法
2018/10/26 Python
python实现Excel文件转换为TXT文件
2019/04/28 Python
基于YUV 数据格式详解及python实现方式
2019/12/09 Python
解决jupyter notebook import error但是命令提示符import正常的问题
2020/04/15 Python
python中Ansible模块的Playbook的具体使用
2020/05/28 Python
基于python模拟TCP3次握手连接及发送数据
2020/11/06 Python
香港草莓网土耳其网站:Strawberrynet TR
2017/03/02 全球购物
俄罗斯最大的灯具网站:Fandeco
2020/03/14 全球购物
澳大利亚领先的时尚内衣零售商:Bras N Things
2020/07/28 全球购物
酒店个人培训自我鉴定
2013/12/11 职场文书
《走一步再走一步》教学反思
2014/02/15 职场文书
三年级小学生评语
2014/04/22 职场文书
python如何在word中存储本地图片
2021/04/07 Python
CSS 实现Chrome标签栏的技巧
2021/08/04 HTML / CSS
python中对列表的删除和添加方法详解
2022/02/24 Python