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

本文实例讲述了微信小程序基于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();

使用 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()

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

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

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

赞 (0)

相关推荐

  • 微信小程序使用canvas的画图操作示例

    本文实例讲述了微信小程序使用canvas的画图操作.分享给大家供大家参考,具体如下: 基础写起来太没动力了,也写得乱七八糟的,还是直接解决一些小问题比较方便,代码的方方面面的细节都会详尽的解释一下. 1.下面介绍一下canvas的画图,我这个简单一点,画一个带图文的背景图,图片可以从后台获取也可以选择本地的.canvas画图首先要在wxml里面新建一个<canvas>标签,一定要写上canvas-id='canvas的id',这是必须条件,如下面代码: <canvas canvas-id

  • 微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)

    微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)

    本文实例讲述了微信小程序MUI导航栏透明渐变功能.分享给大家供大家参考,具体如下: 导航栏透明渐变效果 实现原理 1. 利用position:absolute在导航下定位一个view作为背景渐变使用; 2. 通过改变改view的opacity来实现透明渐变. WXML <!--pages/scroll/scroll.wxml--> <view style="height:100%;position:fixed;width:100%;"> <scroll-v

  • 微信小程序 二维码canvas绘制实例详解

    微信小程序 二维码canvas绘制实例详解

    微信小程序 二维码canvas绘制 var canvas = { width: 100, height:36 }; function verification(ctx) { // //清空画布 ctx.clearRect(0, 0, canvas.width, canvas.height); // //生成随机颜色 function getRandomColor() { return "#" + ("00000" + ((Math.random() * 167772

  • 微信小程序 wxapp画布 canvas详细介绍

    微信小程序 wxapp画布 canvas :最近学习微信小程序的知识,这里记录下小程序 waxpp画布canvas 的知识: canvas 属性名 类型 默认值 说明 hidden Boolean false 设置画布的显示/隐藏,hidden值为true表示隐藏,值为false表示显示 canvas-id String   canvas组件的唯一标识符 binderror EventHandle   当发生错误时触发error事件,detail = { errMsg: 'something w

  • 微信小程序canvas写字板效果及实例

    微信小程序canvas写字板效果及实例

    微信小程序canvas写字板效果及实例 写字板效果:书写文字,画板重置,导出图片,导出图片前判断是否书写内容 app.json: 添加一个路由:"pages/canvas/canvas" { "pages":[ "pages/index/index", "pages/logs/logs", "pages/canvas/canvas" ], "window":{ "navigat

  • 微信小程序canvas实现刮刮乐效果

    本文实例为大家分享了微信小程序实现刮刮乐效果的具体代码,供大家参考,具体内容如下 效果图 设计流程 设计思路 canvas设置背景图,作为中奖图片: 在canvas上绘制刮的灰色涂层: 通过绑定的事件,清除对应区域的涂层: 最后判断涂层清除区域是否超过设置的可见百分比,如果超过则全部涂层清除,否则不清楚. 1.全局常量 获取用户传入的canvas的ID,设置的canvas的宽高,canvas涂层的颜色,清除当前坐标的半径和直径,计算当前清除的面积,全部清除百分比,canvas的面积. const

  • 详解微信小程序-canvas绘制文字实现自动换行

    详解微信小程序-canvas绘制文字实现自动换行

    在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvasContext.fillText参数为 我们只能设置文本的最大宽度,这就产生一定的了问题.如果我们绘制的文本长度不确定或者我们希望文本超出自动换行或者用省略号表示,光靠这个API是无法完成的.下面本人就讲下我在开发中是如何解决这个问题的. 1 wxml代码 <canvas canvas-id="myCanvas" style="border: 1px solid;"/> 2 w

  • 微信小程序实现的canvas合成图片功能示例

    微信小程序实现的canvas合成图片功能示例

    本文实例讲述了微信小程序实现的canvas合成图片功能.分享给大家供大家参考,具体如下: 先要获取图片的信息  然后将需要合成的内容用canvas绘制出来,得到一个合成好的画布,接下来用 wx.canvasToTempFilePath 把当前画布指定区域的内容导出生成指定大小的图片,并返回文件路径.这个时候的路径 是微信的临时路径,浏览器是访问不了的,因此需要请求服务器  用 wx.uploadFile 将本地资源上传到开发者服务器. 在页面的wxml中加入canvas组件如下: <view c

  • 详解微信小程序canvas圆角矩形的绘制的方法

    微信小程序允许对普通元素通过 border-radius 的设置来进行圆角的绘制,但有时候在使用 canvas 绘图的时候,也需要圆角,例如需要将页面上某块区域导出为图片下载到本地的时候,常用的解决方法就是使用 canvas 将这块区域绘制出来,最后导出 canvas 即可,但是 canvas 没有直接提供圆角的绘制 api ,所以需要 曲线救国 圆角矩形与一般矩形的区别在于,前者的四个角都是圆弧,所以只需要将一般矩形的四个角切掉,换成圆弧即可,如下图就是一个一般矩形被切掉了四个角的样子: 很明

  • 微信小程序canvas拖拽、截图组件功能

    微信小程序canvas拖拽、截图组件功能

    先看下微信小程序canvas拖拽功能 组件地址 github.com/jasondu/wx-- readme近期补上 实现效果 如何实现 使用canvas 使用movable-view标签 由于movable-view无法实现旋转,所以选择使用canvas 需要解决的问题 如何将多个元素渲染到canvas上 如何知道手指在元素上.如果多个元素重叠如何知道哪个元素在最上层 如何实现拖拽元素 如何缩放.旋转.删除元素 看起来挺简单的嘛,就把上面这几个问题解决了,就可以实现功能了:接下来我们一一解决.

  • 微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)

    微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)

    本文实例讲述了微信小程序MUI导航栏透明渐变功能.分享给大家供大家参考,具体如下: 导航栏透明渐变效果 实现原理 1. 给page-group设置的背景颜色采用rgba; 2. 通过改变rgba其中a的值来实现透明渐变. WXML <view style="height:100%;position:fixed;width:100%;"> <scroll-view scroll-y="false" bindscroll="scroll&qu

随机推荐