小程序中可能会遇到需要画一个类似于计时器的圆,这里是一个 demo,可以拿走根据自己的业务需求进行调整。
代码比较简单,重点还是写代码的时候注意几点原则吧:
1,每个方法不要超过30行
2,有重复的逻辑,考虑抽取共有方法
3,初始化的变量,可以不设置,使用默认值
wxml代码
<canvas style="width:200px; height:200px;" canvas-id="myCanvas"></canvas>
<view bindtap="startOrStopDraw">{
{drawActive}}</view>
js代码
var app = getApp();
var drawInterval = false;
Page({
data: {
drawActiveArr:['STOP', 'START'],
start: - Math.PI / 2,
stop: - Math.PI / 2,
drawIndex: 1 //默认按钮处于 点击开始画圆 状态
},
onLoad: function (options) {
this.myCanvas();//画布
},
/** 画布 开始*/
startOrStopDraw: function(){
//依次动作:停止画圆、开始画圆
var index = this.data.drawIndex;
// if(index > 0){
// //开始
// this.draw();
// }else{
// //停止
// if (drawInterval){
// clearInterval(drawInterval);
// }
// }
//上面 if 判断流程的缩减写法
index > 0 ? this.draw() : drawInterval ? clearInterval(drawInterval) : false;
index = (index + 1) % 2;
this.setDrawActiveData(index);
},
init: function(){
this.setDrawActiveData(this.data.drawIndex ? this.data.drawIndex : 0);
},
setDrawActiveData: function (drawIndex){
this.setData({
drawActive: this.data.drawActiveArr[drawIndex],
drawIndex: drawIndex
});
},
myCanvas: function(){
this.init();
// this.draw();
},
// 获取 stop 值,然后计算下一帧的值,再继续画
// 15 s 画一圈 15 000 = 40 * 375
draw: function (){
const ctx = wx.createCanvasContext('myCanvas');
var x = 100, y = 100, r = 50;
var start = this.data.start;
var stop = this.data.stop;
var _this = this;
var callback = function () {
stop += (2 * Math.PI) / 375
stop = _this.getStop(stop);
_this.setStop(stop);
_this.myDraw(ctx, x, y, r, start, stop);
}
drawInterval = setInterval(callback, 40);
},
setStop: function(stop){
this.setData({
stop: stop
});
},
getStop: function(stop){
return stop > (2 * Math.PI - Math.PI / 2) ? (2 * Math.PI) / 150 - Math.PI / 2 : stop;
},
myDraw: function(ctx, x, y, r, start, stop){
ctx.arc(x, y, r, start, stop);
ctx.setStrokeStyle('#0cc');
ctx.setLineWidth(5);
ctx.stroke();
ctx.draw();
}
/** 画布 结束*/
})