如何使用 setInterval 为 Canvas 设置动画答案

【问题标题】：How to animate Canvas with setInterval如何使用 setInterval 为 Canvas 设置动画
【发布时间】：2013-10-17 16:28:23
【问题描述】：

我正在尝试使用 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

【问题讨论】：

if (pointFrom &lt; 0) 是您的实际代码还是只是复制/粘贴错误？
console.log?为什么不Ti.API.info
@JosiahHester 我在本地工作，不介意 console.log（但它有效）:)
看起来它只是在清除间隔，因为您正在循环中提取
但是我进入了区间（我在console.log中看到），但它只是不绘制它，如果我将它放在区间之外，则弧线绘制正确！跨度>

标签： titanium appcelerator titanium-modules

【解决方案1】：

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

必须在区间函数中。

【讨论】：