Javascript isn'；当我们有很多动画时，canvas应该比dom操作更快吗？_Javascript_Html_Canvas

Javascript isn'；当我们有很多动画时，canvas应该比dom操作更快吗？

javascript html canvas

Javascript isn'；当我们有很多动画时，canvas应该比dom操作更快吗？,javascript,html,canvas,Javascript,Html,Canvas,我想知道我的代码有什么问题（为什么动画如此急促）： var img=新图像（）； img.onload=函数（）{ var c=document.getElementById（'canvas'）； var ctx=c.getContext（'2d'）；左上角；左=上=0； ctx.drawImage（图像，左，上，20,20）； var f=函数（）{ 左+=1； top+=1； c、宽度=c.宽度； ctx.drawImage（图像，左，上，20,20）； }; 设定间隔（f，20）；

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


var img=新图像（）；
img.onload=函数（）{
var c=document.getElementById（'canvas'）；
var ctx=c.getContext（'2d'）；
左上角；
左=上=0；
ctx.drawImage（图像，左，上，20,20）；
var f=函数（）{
左+=1；
top+=1；
c、 宽度=c.宽度；
ctx.drawImage（图像，左，上，20,20）；
};
设定间隔（f，20）；
};
img.src=”http://a.wearehugh.com/dih5/aoc-h.png";

据我所知canvas应该擅长做这类事情？但是，如果我使用一个元素并操纵它的左上角，它会更快（不那么急促）

我的剧本有什么问题吗？或者这是最好的画布吗

无需在每次迭代中清除整个画布。可以使用

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>


var img=新图像（）
buf=document.createElement（'canvas'）；
img.onload=函数（）{
var c=document.getElementById（'canvas'），
ctx=c.getContext（'2d'），
左=0，上=0，
宽度=20，高度=20；
buf.宽度=宽度；
buf.高度=高度；
buf.getContext（'2d'）.drawImage（img，0，0，宽度，高度）；
var f=函数（）{
ctx.clearRect（左1，上1，宽+1，高+1）
左+=1；
top+=1；
ctx.drawImage（基本单位、左侧、顶部、宽度、高度）；
};
设定间隔（f，20）；
};
img.src=”http://a.wearehugh.com/dih5/aoc-h.png";

你读过吗？在旁注上，

风格=“宽度：…

实际上会拉伸画布。如果要更改视口大小，请改用

width=…

stAttributes.@pimvdb heys sry您能解释一下吗。。你是说width=500px与style不同。width:500px？@Pacener:对于

元素来说这是正确的-使用

style

不会改变分辨率。顺便说一句，这只是个问题。缓冲是一种标准的方法吗？（我在想，当游戏开始有大量的图像时，我们会有大量的缓冲区？标准的方法是有适当大小的图像，所以你不需要缩放它。顺便说一句，当你清除rect时，为什么你选择了宽度+1，高度+1而不是宽度和高度？这是因为画布坐标系的一个特性。画一条直线一个像素宽度您应该这样写：ctx.moveTo（0.5,0.5）；ctx.lineTo（0.5,10.5）。如果您写ctx.moveTo（0,0）；ctx.lineTo（0,10）由于插值算法，你会得到一条灰色的线，两个像素宽。因此，当你绘制图像时，它可以在某个方向上多占用一个像素的区域。这个功能在这里描述得更清楚。嗯，顺便说一句，我很确定图像不会受到插值的影响…（只有线会）…还是我弄错了？

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