разве холст не должен быть быстрее, чем манипуляция dom, когда у нас много анимации? - PullRequest
Новая
       3

разве холст не должен быть быстрее, чем манипуляция dom, когда у нас много анимации?

2 голосов
/ 30 мая 2011

Мне интересно, что не так с моим кодом (почему анимация такая прерывистая): 

<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 Ответ

4 голосов
/ 30 мая 2011

  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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...