微信小程序基于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 相关文章推荐
js下用gb2312编码解码实现方法
Dec 31 Javascript
jQuery学习2 选择器的使用说明
Feb 07 Javascript
javascript之bind使用介绍
Oct 09 Javascript
onbeforeunload与onunload事件异同点总结
Jun 24 Javascript
HTTP 304错误的详细讲解
Nov 13 Javascript
文本域中换行符的替换示例
Mar 04 Javascript
javascript实现des解密加密全过程
Apr 03 Javascript
AngularJs基本特性解析(一)
Jul 21 Javascript
angularjs2 ng2 密码隐藏显示的实例代码
Aug 01 Javascript
Node.js使用cookie保持登录的方法
May 11 Javascript
浅谈js闭包理解
Apr 01 Javascript
vue 中几种传值方法(3种)
Nov 12 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源码分析之DZX1.5字符串截断函数cutstr用法
2015/06/17 PHP
详解PHP中的Traits
2015/07/29 PHP
PHP中的密码加密的解决方案总结
2016/10/26 PHP
Laravel框架自定义公共函数的引入操作示例
2019/04/16 PHP
php操作redis数据库常见方法实例总结
2020/02/20 PHP
用JS实现的一个include函数
2007/07/21 Javascript
alixixi runcode.asp的代码不错的应用
2007/08/08 Javascript
IE6/7/8/9不支持exec的简写方式
2011/05/25 Javascript
点击进行复制的JS代码实例
2013/08/23 Javascript
jquery map方法使用示例
2014/04/23 Javascript
jQuery实现隔行背景色变色
2014/11/24 Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
2015/08/21 Javascript
vue实现app页面切换动画效果实例
2017/05/23 Javascript
JavaScript中的return布尔值的用法和原理解析
2017/08/14 Javascript
基于Bootstrap实现城市三级联动
2017/11/23 Javascript
微信小程序使用template标签实现五星评分功能
2018/11/03 Javascript
vue拖拽排序插件vuedraggable使用方法详解
2020/08/21 Javascript
基于JS实现计算24点算法代码实例解析
2020/07/23 Javascript
用vue设计一个日历表
2020/12/03 Vue.js
python实现简单tftp(基于udp协议)
2018/07/30 Python
Python字典对象实现原理详解
2019/07/01 Python
简单了解python关系(比较)运算符
2019/07/08 Python
Python 中的 global 标识对变量作用域的影响
2019/08/12 Python
tensorflow如何批量读取图片
2019/08/29 Python
Python 私有化操作实例分析
2019/11/21 Python
python识别验证码的思路及解决方案
2020/09/13 Python
python+requests实现接口测试的完整步骤
2020/10/27 Python
Opodo英国旅游网站:预订廉价航班、酒店和汽车租赁
2018/07/14 全球购物
Etam艾格英国官网:法国著名女装品牌
2019/04/15 全球购物
Nike意大利官网:Nike.com IT
2020/01/19 全球购物
小学生家长寄语
2014/04/02 职场文书
2016自主招生校长推荐信范文
2015/03/23 职场文书
教师节获奖感言
2015/07/31 职场文书
2019年七夕情人节浪漫祝福语大全!
2019/08/08 职场文书
Python基础知识学习之类的继承
2021/05/31 Python
Python用tkinter实现自定义记事本的方法详解
2022/03/31 Python