Question

我正在尝试使用Canvas库绘制弧线。我得到了第一个绘制的蓝色弧，但是setInterval内部没有发生任何事情（与setTimeout相同）。如何使用Canvas动态构建内容？

这是我的代码：

var canvas = Canvas.createView();

canvas.begin();

canvas.arc(120, 120, 50, 0 * Math.PI, 2 * Math.PI, 0);
canvas.lineWidth(10);
canvas.strokeStyle('blue');
canvas.stroke();

var pointFrom = 1.5;

var interval = setInterval(function() {
  var pointTo = pointFrom - 0.5;

  console.log('pointFrom : ' + pointFrom);
  console.log('pointTo : ' + pointTo);
  canvas.arc(120, 120, 50, pointFrom * Math.PI, pointTo * Math.PI, 1);
  canvas.lineWidth(15);
  canvas.strokeStyle('red');
  canvas.stroke();

  pointFrom = pointTo;

  if (pointFrom < 0) clearInterval(interval);
}, 2000);

my_view.add(canvas);

Thanks

Answer 1

在

canvas.begin()
canvas.arc(120, 120, 50, pointFrom * Math.PI, pointTo * Math.PI, 1)
canvas.stroke()
canvas.commit()

必须在区间函数中。

如何使用setInterval为Canvas设置动画

1 个答案: