Question

我想知道我的代码有什么问题（为什么动画如此生涩）：

<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>

据我所知，帆布应该善于做这些东西？但如果相反我使用了一个元素并操纵它的左侧和顶部它最终变得更快（不那么生涩）..

我的脚本有问题吗？或者这是最好的画布可以做到的吗？

Answer 1

无需在每次迭代时清除整个画布。可以使用clearRect方法。
每次绘制图像时都需要缩放图像。为避免这种情况，您只能在隐形画布上绘制一次，然后在可见的画布上绘制该画布。

您的代码具有更高的可读性和性能：

<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>

当我们有很多动画时，画布应该比dom操作更快吗？

1 个答案: