是'当我们有很多动画时，t canvas应该比dom操作更快

isn't canvas supposed to be faster than dom manipulation when we have a lot of animation?

本文关键字：canvas dom 操作 我们有 动画      更新时间：2023-09-26

我想知道我的代码出了什么问题（为什么动画如此不连贯）：

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

据我所知，画布应该擅长做这些事情？但是，如果我使用一个元素并操纵它的左侧和顶部，它最终会更快（不那么颠簸）。。

我的剧本有问题吗？还是这是最好的画布？

  1. 没有必要在每次迭代中清除整个画布。可以使用clearRect方法。

  2. 每次绘制图像时都需要缩放图像。为了避免这种情况，您可以只在不可见的画布上绘制一次，然后在可见的画布中绘制此画布。

提高可读性和性能的代码：

<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>
相关文章：