画布动画放慢

下面的代码动画了一个选框行。动画开始的速度非常快，但随着时间的推移显着减慢。请帮我弄清楚为什么。相同的代码在这里：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();

来源

2012-04-19 akonsu

您曾经试图弄清楚自己为什么？那导致你在哪里？ – Armatus 2012-04-19 17:54:28

我有和失败:)特别是，我不看我是否在我的动画循环过程中创建任何新的对象，似乎一切都缓存，即模式，上下文等。 – akonsu 2012-04-19 17:56:04

不用担心。你知道多么阴暗的“请帮我弄清楚为什么”，然后是一个大的代码块，看起来没有你给的细节:) – Armatus 2012-04-19 18:03:30

试试这个变化（beginPath方法（））

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

链接http://jsbin.com/aleqef/4/edit#preview

来源

2012-04-19 18:17:18

这太棒了。谢谢。你知道为什么beginPath似乎可以解决这个问题吗？ – akonsu 2012-04-19 18:19:36

答案在这里:) http://stackoverflow.com/a/4983173/1238040 – 2012-04-19 18:20:43

画布动画放慢

回答

相关问题