le canvas n'est-il pas censé être plus rapide que la manipulation dom lorsque nous avons beaucoup d'animation ?

Question

le canvas n'est-il pas censé être plus rapide que la manipulation dom lorsque nous avons beaucoup d'animation ?

Demandé el 30 de Mai, 2011: Quand la question a-t-elle été
1292 affichage: Nombre de visites la question a
1 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Je me demande ce qui ne va pas dans mon code (pourquoi l'animation est si saccadée) :

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

D'après ce que je sais, la toile est censée être bonne pour faire ce genre de choses ? Mais si à la place j'utilisais un élément et que je manipulais sa gauche et son haut, cela serait plus rapide (moins saccadé)

Y a-t-il un problème avec mon script ? ou est-ce le mieux que la toile puisse faire ?

Demandé el 30 de Mai, 2011 par Pacerier

Answer 1

1 Réponses

Answer 2

4voto

bjornd Points 11457

Il n'est pas nécessaire d'effacer l'ensemble du canevas à chaque itération. Il est possible d'utiliser clearRect méthode.
Chaque fois que l'on dessine une image, il est nécessaire de la mettre à l'échelle. Pour éviter cela, vous pouvez dessiner une seule fois sur un canevas invisible et ensuite dessiner ce canevas sur un canevas visible.

Votre code est plus lisible et plus performant :

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

Répondu el 30 de Mai, 2011 par bjornd (11457 Points )

le canvas n'est-il pas censé être plus rapide que la manipulation dom lorsque nous avons beaucoup d'animation ?

Réponse

Questions en vedette

Top Tags

Prograide.com

Powered by:

le canvas n'est-il pas censé être plus rapide que la manipulation dom lorsque nous avons beaucoup d'animation ?

Réponse

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: