画布动画变慢了

Question

下面的代码实现了一个跑马灯效果。动画开始得很快，但随着时间的推移逐渐变慢。请帮我找出原因。这是完全相同的代码：http://jsbin.com/aleqef/ 编辑：在我的动画循环中，我没有创建任何新对象，一切似乎都被缓存了，包括图案、上下文等。我只是没有发现什么可疑之处。看起来像是内存问题，但我不确定原因。

var data = [ "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAMAAADXEh96AAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAGUExURQAAAP///6XZn90AAAAcSURBVHjaYmBgYGBkZAQSYAjlgUXgYhAeQIABAAGkABPpfLrFAAAAAElFTkSuQmCC", "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAMAAADXEh96AAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAGUExURQAAAP///6XZn90AAAAeSURBVHjaYmBkAEEgYGRkBBEgFgMDRBTGA8sBBBgAAaQAE03fiAgAAAAASUVORK5CYII=", "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAMAAADXEh96AAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAGUExURQAAAP///6XZn90AAAAdSURBVHjaYmBgZGRkYGAAY0YGCITxoHIQUYAAAwABpAATvSsONQAAAABJRU5ErkJggg==" ]; var context = document.getElementById("canvas").getContext("2d"); var count = data.length; var patterns = []; var pattern = 0;

// 加载图片 function onload(e) { patterns.push(context.createPattern(e.target, "repeat")); }

// 画线 function draw() { for (var angle = 0; angle < 360; angle += 5) { var rad = (angle * Math.PI) / 180; var x = 200 * Math.cos(rad); var y = 200 * Math.sin(rad); context.moveTo(0, 0); context.lineTo(x, y); } }

// 动画 function animate() { window.setTimeout(animate, 1000 / 60); if (patterns.length > 0) { context.clearRect(0, 0, context.canvas.width, context.canvas.height); draw(); context.lineWidth = 1; context.strokeStyle = patterns[pattern]; context.stroke(); pattern = (pattern + 1) % patterns.length; } }

// 加载图片并执行动画 for (var i = 0; i < count; i++) { var image = new Image(); image.onload = onload; image.src = data[i]; } animate();

- akonsu

---

你尝试过自己找出原因吗？这导致了什么结果？ - Armatus

我已经尝试过了 :) 特别是，我不知道在我的动画循环中是否创建了任何新对象，因为似乎所有的东西都被缓存了，包括图案、上下文等。 - akonsu

没关系。你知道如果没有你刚才提供的细节，“请帮我找出为什么”后面跟着一大块代码看起来有多可疑 :) - Armatus

setTimeout应该放在渲染之后，虽然这在Chrome中没有影响，但看起来有点奇怪。 - rlemon

Answer 1

尝试这个更改（beginPath()）。

if (patterns.length > 0) {
    context.clearRect(0, 0, context.canvas.width, context.canvas.height);
    context.beginPath();
    draw();

Link http://jsbin.com/aleqef/4/edit#preview

- Heitor Chang

---

这太棒了。谢谢你。你知道为什么 beginPath 似乎可以解决这个问题吗？ - akonsu