这个是我的代码circle.js
// 详情请看https://blog.csdn.net/Charles_Tian/article/details/80908442
Component({
properties: {
num: {
type: Number,
value: 0,
},
myValue: {
type: String,
value: '',
},
all: {
type: Number,
value: 1,
}
},
data: {
timer: ''
},
ready(options) {
// 页面初始化 options为页面跳转所带来的参数
let that = this;
// 以下两个是测试数据
let totalItems = 100;
let rightItems = 100;
let showItems = (100 * that.properties.num / that.properties.all).toFixed(0);
// let completePercent = parseInt((rightItems / totalItems) * 100);
// that.getResultComment(completePercent);
that.showScoreAnimation(rightItems, totalItems, showItems);
},
methods: {
showScoreAnimation: function (rightItems, totalItems,number) {
/*
cxt_arc.arc(x, y, r, sAngle, eAngle, counterclockwise);
x Number 圆的x坐标
y Number 圆的y坐标
r Number 圆的半径
sAngle Number 起始弧度,单位弧度(在3点钟方向)
eAngle Number 终止弧度
counterclockwise Boolean 可选。指定弧度的方向是逆时针还是顺时针。默认是false,即顺时针。
*/
let that = this;
let copyRightItems = 0;
that.setData({
timer: setInterval(function () {
copyRightItems++;
if (copyRightItems == number) {
clearInterval(that.data.timer)
} else {
// 页面渲染完成
// 这部分是灰色底层
let cxt_arc = wx.createCanvasContext('canvasArc', that);//创建并返回绘图上下文context对象。
cxt_arc.setLineWidth(6);//绘线的宽度
cxt_arc.setStrokeStyle('#d2d2d2');//绘线的颜色
cxt_arc.setLineCap('round');//线条端点样式
cxt_arc.beginPath();//开始一个新的路径
cxt_arc.arc(180, 120, 100, 0, 2 * Math.PI, false);//设置一个原点(53,53),半径为50的圆的路径到当前路径
cxt_arc.stroke();//对当前路径进行描边
//这部分是蓝色部分
cxt_arc.setLineWidth(6);
cxt_arc.setStrokeStyle('#33b7c3');
cxt_arc.setLineCap('round')
cxt_arc.beginPath();//开始一个新的路径
cxt_arc.arc(180, 120, 100, -Math.PI * 1 / 2, 2 * Math.PI * (copyRightItems / totalItems) - Math.PI * 1 / 2, false);
cxt_arc.stroke();//对当前路径进行描边
cxt_arc.draw();
}
}, 20)
})
},
}
})
很是奇怪呢
奇怪了 setInterval 放到setData里边干什么?页面要用到timer这个属性?
很少奇怪呢,卡顿感不知道是怎么产生的