共计 1881 个字符,预计需要花费 5 分钟才能阅读完成。
最近需要要小程序加一个动静圆环的成果,小程序?圆环?听到这个需要,是不是头痛 … 上面来解决你的头痛。
圆环我采纳了 canvas
1、首先,咱们在 wxml 文件外面写入
<canvas class="myCanvas" canvas-id="canvasid{{index}}"></canvas>
2、第二步去写 js
一个函数给你本人领会
在后面先定义
for (let i = 0; i < len; i++) {let obj = {}
obj.strat_num = 0 // 圆环的起始点
obj.end_num = 100 // 圆环的起点
obj.sAngle = 1.5 * Math.PI // 圆面积公示是 2 PI,这里小设 1.5
obj.eAngle = 0 // 面积起始点
obj.timer = null // 动画定时器
obj.context = new wx.createCanvasContext('canvasid' + i); // 创立数组画笔
canvasArray.push(obj)
}
定义好了咱们就开始
function canvas(end, IND) {
// end : 你想要进度条达到第几步,假如进度条 100 份,end 能够设 动静值
// IND : 一个 canvas 满足不了我,我的 canvas 是一个数组,IND 是 下标
// canvasArray 数组画图
var that = this;
if (canvasArray.length == 0) return
let end_num = canvasArray[IND].end_num
let sAngle = canvasArray[IND].sAngle
let context = canvasArray[IND].context
if (end >= canvasArray[IND].strat_num) {
// 计算公式 不加形容
canvasArray[IND].eAngle = canvasArray[IND].strat_num * 2 * Math.PI / end_num + 1.5 * Math.PI;
// 这里开始就做动画了,延时器走起
canvasArray[IND].timer = setTimeout(function () {
// 色彩突变,想设置就设置
// let gradient = context.createLinearGradient(50, 0, 50, 100);
// gradient.addColorStop("0", "#00D2C4");
// gradient.addColorStop("0.3", "#00D2C4");
// gradient.addColorStop("0.6", "#00D2C4");
// gradient.addColorStop("1.0", "#00D2C4");
// context.setStrokeStyle(gradient)
if (end < 90) { // 圆角、直角想设置就设置
context.lineCap = "round";
}
context.setStrokeStyle('#00D2C4')
context.setLineWidth(4)
context.arc(65, 65, 60, sAngle, canvasArray[IND].eAngle, false)
context.stroke()
context.draw()
canvasArray[IND].strat_num++
that.canvas(end, canvasIND)
}, 20)
} else {clearTimeout(canvasArray[IND].timer)
}
}
3、函数都写好了,第三步去触发就行了
canvasIND = e.currentTarget.dataset.index // 数组选第几个 canvas
this.canvas(30,canvasIND) // 那就执行,先小跑 30 步
clearTimeout(canvasArray[IND].timer) // 在第二次执行先,要先清掉上次的提早器
this.canvas(100,canvasIND) // 这次我决定一下子跑完 100 步
4、次要的都写进去了,有人问,我想清空画图怎么办,持续看
let ctx = canvasArray[canvasIND].context; // 拿到那支笔
canvasArray[canvasIND].strat_num = 0 // 重置步数
ctx.clearRect(0, 0, 130, 130); // 这个是清空你的画布,我的画布是 width:130,height:130
ctx.draw(); // clearRect()执行不带这个 draw(),白干!
圆环画图动态效果就实现了,谢谢大家!
求比个心点个赞!
正文完