小程序利用canvas实现波浪动态图，原生canvas的部分限制

小程序利用canvas实现波浪动态图

小程序的canvas与该动态图的问题
首先上效果图片
下面直接上代码

小程序的canvas与该动态图的问题

小程序的canvas与html的canvas实现是完全一致的，但是会有一些坑，比如在component使用时会有一些限制，需要绑定this，匹配上下文环境获取canvas，另外看到一种方式，请参考 http://blog.majinyu.xyz/index.php/weapp/canvas-not-work-in-customized-components-in-weapp/，
其次说到该动态图，网上的小程序demo是没有的，因此才写上

首先上效果图片

效果如图所示，会显示一个动态的水波浪，好看的动画背景，适用于很多场景

图片:

下面直接上代码

html代码片

  <!-- html --><canvas   canvas-id="canvas" class="canvas"></canvas>

css代码片


// css.canvas {width: 305px;height: 305px;background-color: #fff;
}

js代码片

// javascript
Page({onReady: function () {this.drawBall()},drawBall: function () {var canvas={width:300,height:300,};var boHeight = canvas.height / 10;var posHeight = canvas.height / 1.2;//初始角度为0 var step = 0;//定义三条不同波浪的颜色 var lines = ["rgba(0,222,255, 0.2)","rgba(157,192,249, 0.2)","rgba(0,168,255, 0.2)"]; var context = wx.createContext();debuggerlet requestAnimFrame = (function () {return function (callback) {setTimeout(callback, 1000 / 60);};})();function loop() {context.clearRect(0, 0, canvas.width, canvas.height);step++;//画3个不同颜色的矩形 for (var j = lines.length - 1; j >= 0; j--) {context.fillStyle = lines[j];//每个矩形的角度都不同，每个之间相差45度 var angle = (step + j * 50) * Math.PI / 180;var deltaHeight = Math.sin(angle) * boHeight;var deltaHeightRight = Math.cos(angle) * boHeight;context.beginPath();context.moveTo(0, posHeight + deltaHeight);context.bezierCurveTo(canvas.width / 2, posHeight + deltaHeight - boHeight, canvas.width / 2, posHeight + deltaHeightRight - boHeight, canvas.width, posHeight + deltaHeightRight);context.lineTo(canvas.width, canvas.height);context.lineTo(0, canvas.height);context.lineTo(0, posHeight + deltaHeight);context.closePath();context.fill();}wx.drawCanvas({canvasId: 'canvas',actions: context.getActions()})requestAnimFrame(loop);}loop(); },
})

该文章4个月后注：最近几天公司又叫我写了一个局部加载的动画，感觉自己已经能独立的完全编写任何2D简单动画了（总不能画画把）

懒得写的朋友可以找我要代码 qq251396223

小程序利用canvas实现波浪动态图，原生canvas的部分限制相关推荐

微信小程序利用canvas实现六边形蜘蛛图
微信小程序利用canvas实现六边形蜘蛛图发布时间:2018-01-24 14:30:29 1..wxml <canvas style="width: 200px; height: ...
小程序利用canvas 绘制图案（生成海报，生成有特色的头像）
小程序利用canvas 绘制图案 (生成海报, 生成有特色的头像) 微信小程序生成特色头像,海报等是比较常见的.下面我来介绍下实现该类小程序的过程. 首先选择前端来通过 canvas 绘制.这样比较节 ...
html5绘制图形幸运大转盘,微信小程序利用canvas 绘制幸运大转盘功能
小程序对 canvas api 跟h5的不太一致 ,所以这个搞的比较久,不多说,先贴代码 Page({ /** * 页面的初始数据 */ data: { awardsConfig: {}, resta ...
HQChart钉钉小程序教程1-创建K线图
HQChart钉钉小程序教程1-创建K线图,分时图钉钉小程序HQChart效果图步骤 1. 创建画布 2. 添加HQChart插件文件 3. import插件 4. 初始化HQChart插件 5. ...
微信小程序利用echarts实现中国任意行政区域地图
微信小程序利用echarts实现中国任意行政区域地图前言实现克隆代码集成点击事件点击跳转代码改造尾巴前言最近微信小程序中需要绘制地图,然后点击地图可以跳转到下一层级.研究了一番,选 ...
uniapp之微信小程序开发——根据主题色动态修改svg的颜色
文章目录小程序引用图片的几种方式小程序如何引用svg图片? 小程序根据主题色,动态修改svg颜色总结及注意点小程序引用图片的几种方式这一期我们直入主题,教大家如何动态改变图标的颜色. 首先, ...
python画图代码-Python实战小程序利用matplotlib模块画图代码分享
Python中的数据可视化 matplotlib 是python最著名的绘图库,它提供了一整套和matlab相似的命令API,十分适合交互式地进行制图.而且也可以方便地将它作为绘图控件. 实战小程序: ...
用python画图代码-Python实战小程序利用matplotlib模块画图代码分享
Python中的数据可视化 matplotlib 是python最著名的绘图库,它提供了一整套和matlab相似的命令API,十分适合交互式地进行制图.而且也可以方便地将它作为绘图控件. 实战小程序: ...
微信小程序最简单的轮播图
小程序轮播图今天给大家分享一个在微信开发者工具开发微信小程序的简单案例--轮播图(只用wxml和wxss) 话不多说,直接上代码!!! 效果图 WXML代码基本属性介绍 <!-- indic ...