下面的代码为选取框线设置动画。动画开始非常快，但随着时间的推移明显减慢。请帮我弄清楚为什么。同样的代码在这里: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=="
];<br/>
var context = document.getElementById("canvas").getContext("2d");
var count = data.length;
var patterns = [];
var pattern = 0;<br/>
function onload(e) {
patterns.push(context.createPattern(e.target, "repeat"));
}<br/>
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);<br/>
context.moveTo(0, 0);
context.lineTo(x, y);
}
}<br/>
function animate() {
window.setTimeout(animate, 1000 / 60);<br/>
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;
}
}<br/>
for (var i = 0; i < count; i++) {
var image = new Image();
image.onload = onload;
image.src = data[i];
}<br/>
animate();
最佳答案
试试这个改变 (beginPath())
if (patterns.length > 0) {
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
context.beginPath();
draw();
关于javascript - Canvas 动画变慢，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10233796/