【小程序】关于小程序的绘图问题

Z时代
2024-01-10
分类：技术分享

开发工具绘制的图形

【小程序】关于小程序的绘图问题

ios上绘制的图形

【小程序】关于小程序的绘图问题

小程序绘图问题，在电脑的执行出来，绘出了完整的转盘，但在真机ios上，绘出来的不一样。我设定延时函数执行wx.drawCanvas后，ios上会绘制出中间的按钮和四周的奖励文字，延时函数一执行，最后结果就是和没设置延时函数一样的结果，如图所示。请问这代码怎么修改才能在ios上绘制出完整的图形呢？

下面是代码部分：

app.awardsConfig = {
chance: true,
awards: [
{ 'index': 0, 'name': '1元红包' },
{ 'index': 1, 'name': '5元话费' },
{ 'index': 2, 'name': '6元红包' },
{ 'index': 3, 'name': '8元红包' },
{ 'index': 4, 'name': '10元话费' },
{ 'index': 5, 'name': '10元红包' }
]
}
// 绘制转盘
var awardsConfig = app.awardsConfig.awards,
len = awardsConfig.length,
rotateDeg = 360 / len / 2 + 90,
html = [],
turnNum = 1 / len  // 文字旋转 turn 值
that.setData({
btnDisabled: app.awardsConfig.chance ? '' : 'disabled'
})
var ctx = wx.createContext()
for (var i = 0; i < len; i++) {
// 保存当前状态
ctx.save();
// 开始一条新路径
ctx.beginPath();
// 位移到圆心，下面需要围绕圆心旋转
ctx.translate(150, 150);
// 从(0, 0)坐标开始定义一条新的子路径
ctx.moveTo(0, 0);
// 旋转弧度,需将角度转换为弧度,使用 degrees * Math.PI/180 公式进行计算。
ctx.rotate((360 / len * i - rotateDeg) * Math.PI / 180);
// 绘制圆弧
ctx.arc(0, 0, 150, 0, 2 * Math.PI / len, false);
// 颜色间隔
if (i % 2 == 0) {
ctx.setFillStyle('#ffb820');
} else {
ctx.setFillStyle('#ffcb3f');
}
// 填充扇形
ctx.fill();
// 绘制边框
ctx.setLineWidth(0.5);
ctx.setStrokeStyle('#e4370e');
ctx.stroke();
// 恢复前一个状态
ctx.restore();
// 奖项列表
html.push({ turn: i * turnNum + 'turn', award: awardsConfig[i].name });
}
that.setData({
awardsList: html
});
// setTimeout(function(){
wx.drawCanvas({
canvasId: 'lotteryCanvas',
actions: ctx.getActions()
})
// },3000)