我想知道我的代码出了什么问题(为什么动画如此不稳定):
<html>
<head>
</head>
<body style="background:black;margin:0;padding:0;">
<canvas id="canvas" style="background:white;width:100%;height:100%;"/>
<script>
var img=new Image();
img.onload=function(){
var c=document.getElementById('canvas');
var ctx = c.getContext('2d');
var left,top;
left=top=0;
ctx.drawImage(img,left,top,20,20);
var f=function(){
left+=1;
top+=1;
c.width=c.width;
ctx.drawImage(img,left,top,20,20);
};
setInterval(f,20);
};
img.src="http://a.wearehugh.com/dih5/aoc-h.png";
</script>
</body>
</html>
据我所知，canvas 应该擅长做这些事情？但如果我使用一个元素并操纵它的左侧和顶部，它最终会更快(不那么生涩)..
我的脚本有问题吗？或者这是最好的 Canvas ？
最佳答案
无需在每次迭代时清除整个 Canvas 。可以使用
clearRect方法。每次绘制图像时都需要缩放图像。为了避免这种情况，您可以只在不可见的 Canvas 上绘制一次，然后将该 Canvas 绘制在可见的 Canvas 上。
您的代码具有更高的可读性和性能:
<html>
<head>
</head>
<body style="background:black;margin:0;padding:0;">
<canvas id="canvas" style="background:white;width:100%;height:100%;"/>
<script>
var img=new Image()
buf = document.createElement('canvas');
img.onload=function(){
var c = document.getElementById('canvas'),
ctx = c.getContext('2d'),
left = 0, top = 0,
width = 20, height = 20;
buf.width = width;
buf.height = height;
buf.getContext('2d').drawImage(img, 0, 0, width, height);
var f=function(){
ctx.clearRect(left-1, top-1, width + 1, height + 1)
left+=1;
top+=1;
ctx.drawImage(buf, left, top, width, height);
};
setInterval(f,20);
};
img.src="http://a.wearehugh.com/dih5/aoc-h.png";
</script>
</body>
</html>
关于javascript - 当我们有很多动画时，canvas 不是应该比 dom 操作更快吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6172732/