小程序 canvas 画环形进度条,真机无法画图显示。
小程序 canvas 画环形进度条,真机无法画图显示,求大神帮忙
Page({
data: {
// 开始角度
startAngle: (.8 * Math.PI),
// 结束角度
endAngle: 2.2 * Math.PI,
// 偏移角度
xAngle: Math.PI / 180
},
onLoad: function () {
var that = this;
var cxt_arc = wx.createContext();
var endAngle = that.data.endAngle;
var xAngle = that.data.xAngle;
var templeAngle = that.data.startAngle;
var rander = function () {
if (templeAngle >= endAngle) {
return;
} else if (templeAngle + xAngle > endAngle) {
templeAngle = endAngle;
} else {
templeAngle += xAngle
}
const grd = cxt_arc.createLinearGradient(0, 0, 170, 0)
grd.addColorStop(0, '#fb9502')
grd.addColorStop(1, '#fff118')
cxt_arc.beginPath();
cxt_arc.setLineWidth(6);
cxt_arc.setStrokeStyle(grd)
cxt_arc.setLineCap('round')
cxt_arc.arc(125, 125, 120, that.data.startAngle, templeAngle);
cxt_arc.stroke();
cxt_arc.closePath();
wx.drawCanvas({
canvasId: 'canvasArc',
actions: cxt_arc.getActions()
})
requestAnimationFrame(rander);
}
rander()
},
})
<canvas class="cir" style="width:200px; height:200px;" canvas-id="canvasArc">
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
微信小程序不支持requestAnimationFrame