关于小程序 的绘图问题

Question

开发工具绘制的图形

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)