Effacer Canvas Rect (mais conserver l'arrière-plan)

Je suis en train d'animer un cercle et il suffit de le déplacer horizontalement qui fonctionne très bien. Cependant, alors que le cercle est en mouvement, je dois faire un clearRect plus que le cercle de sorte qu'il redessine auto dans le sens horizontal. Quand je fais un clearRect il rend également le fond blanc de la boîte autour de sorte que effectivement sa va être une ligne blanche horizontale dans la direction que le cercle est en mouvement.

  1. Est-il un moyen pour effacer le cercle sans clearRect?
  2. Si je dois garder de redessiner l'arrière-plan après clearRect la toile se met à clignoter lorsque theres dire 10 cercles en mouvement dans cette zone.

D'autres façons de résoudre ce problème?

    function drawcircle() {
        clear();    

        context.beginPath();
        context.arc(X, Y, R, 0, 2*Math.PI, false);                  
        context.moveTo(X,Y);            
        context.lineWidth = 0.3;
        context.strokeStyle = "#999999"; 
        context.stroke();

        if (X > 200)
        {
            clearTimeout(t); //stop
        }
        else
        {
            //move in x dir
            X += dX;
            t = setTimeout(drawcircle, 50);
        }
    }

    function clear() {
        context.clearRect(X-R, Y-R, 2*R, 2*R);
    }

source d'informationauteur fes

  1. 24

    De base: HTML5 Canvas en tant que Non-Conservé le Mode de Dessin d'API Graphique

    Tout d'abord, laissez-nous discuter de la manière dont le HTML5 Toile. Comme le monde réel de la toile avec de rapide-séchage de la peinture à l'huile, lorsque vous stroke() ou fill() ou drawImage() sur votre toile, la peinture devient une partie de la toile. Bien que vous a attiré un "cercle" et de la voir ainsi, les pixels du cercle complètement remplacé le fond d'écran (ou, dans le cas de l'anti-aliasing sur les bords du cercle, mélangé avec et a changé à jamais). Ce serait Monet dire si vous lui a demandé de "déplacer" l'une des personnes dans une peinture un peu vers la droite? Vous ne pouvez pas déplacer le cercle, vous ne pouvez pas effacer le cercle, vous ne pouvez pas détecter un effet de survol du cercle...parce que il n'y a pas de cercleil y a juste un seul tableau 2D de pixels.

    Certaines Options

    1. Si votre fond est complètement statique, la définir comme une image de fond à votre canvas élément via CSS. Ce sera affichée et le couvrit avec le contenu que vous dessinez, mais ne sera pas effacé lorsque vous désactivez votre toile.

    2. Si vous ne pouvez pas faire ci-dessus, alors vous pourriez aussi bien d'effacer l'intégralité de la toile et re-peindre chaque image. Dans mes tests, le travail nécessaire pour effacer et redessiner une partie de la toile n'est pas en vaut la peine, à moins que de redéfinir la toile est très cher.

      Par exemple, voir ce test: http://phrogz.net/tmp/image_move_sprites_canvas.html

      Dans Safari v5.0.4 je vois 59.4 fps si je effacer et re-dessiner l'ensemble de la toile une fois par image, et de 56,8 fps si j'utilise 20 clearRect() appels et 20 drawImage() appels à re-dessiner juste la salis partie de l'arrière-plan de chaque image. Dans ce cas, il est plus lent d'être intelligent et de garder trace de la petite sale régions.

    3. Comme une alternative, utiliser une retenue-dessin graphique d'un système comme le SVG ou HTML. Avec ces éléments, chaque élément est maintenus de façon indépendante. Vous pouvez modifier la position de l'élément et il va automatiquement se déplacer; c'est au navigateur de façon intelligente le tirage de la mise à jour de la manière la plus efficace possible.

      Vous pouvez le faire tout en conservant la puissance de la coutume toile dessin par la création et la superposition de plusieurs toiles dans la même page HTML (à l'aide de CSS de positionnement absolu et z-index). Comme on le voit dans ce test de performancele déplacement 20 sprites via CSS est nettement plus rapide que d'essayer de tout faire vous-même sur une seule toile.

    Scintillement?

    Vous avez écrit:

    Si je dois garder de redessiner l'arrière-plan après clearRect la toile se met à clignoter lorsque theres dire 10 cercles en mouvement dans cette zone.

    Qui n'a jamais été mon expérience. Pouvez-vous donner un petit exemple montrant ce "scintillement" problème vous demande (veuillez préciser système d'exploitation, navigateur et la version que vous rencontrez ce sur)? Voici deux commentaires par des développeurs de navigateurs notant que ni Firefox, ni Safari devrait jamais montrer aucun scintillement.

  2. 0

    C'est en fait très facile à faire par simple positionnement plus qu'une toile sur le dessus les uns des autres. Vous pouvez dessiner votre arrière-plan sur une toile qui est (wait for it...) en arrière-plan, et de tirer vos cercles sur une deuxième toile qui est au premier plan. (c'est à dire empilés devant l'arrière-plan de toile)

    Plusieurs toiles est en fait l'un des meilleurs moyens pour augmenter les performances de quoi que ce soit de l'animation, où les éléments de l'image finale se déplacer indépendamment et ne sont pas nécessairement dans chaque image. Cela vous permet d'éviter de redessiner les éléments qui n'ont pas bougé dans chaque image. Cependant, une chose à garder à l'esprit est que la modification de la profondeur relative (pensez à z-index) des éléments tirés sur différentes toiles exige maintenant que le réel <canvas> éléments de réorganisations dans les dom. Dans la pratique, c'est rarement un problème pour les jeux 2D et des animations.

  3. -1

    Il y a deux façons dont vous pouvez faire ce qui pourrait réduire le scintillement, esp si vous avez de nombreux cercles.

    L'un est le double buffering, et pour une brève question sur ce que vous pouvez regarder:
    N'HTML5/Support de la Toile Double mise en mémoire Tampon?

    Fondamentalement, vous dessinez sur deux toiles, et les swap et.

    Ce serait préférable, esp, avec de nombreux changements par image, mais de l'autre je l'ai fait c'est de simplement s'appuyer sur le cercle, je veux effacer, à l'aide de la couleur d'arrière-plan, puis dessiner avec la bonne couleur, le nouveau cercle.

    Le seul problème est qu'il ya une petite chance que vous pouvez laisser des preuves de la tentative d'effacement, car il semble que pour certaines formes, il est difficile de l'obtenir pour dessiner exactement sur le dessus.

    Mise à JOUR:

    Basé sur un commentaire, vous pouvez regarder cette discussion sur la double mise en mémoire tampon sur la toile:

    HTML toile double mise en mémoire tampon de trame les questions de taux de

    L'idée de base est de garder une trace de tout ce que vous avez dessiné, avec le poste actuel, ensuite, sur une autre toile, vous redessiner tout, ensuite, retournez-les, et ensuite, je voudrais juste redessiner encore une fois, dans les nouveaux postes, pour s'assurer que l'image ressemble exactement comme il le devrait. La permutation entre eux et est une opération rapide, le seul problème serait si vous mettez des gestionnaires d'événement sur la toile, dans ce cas, demandez-leur sur la div ou span entourant la toile, de sorte que cette information ne soit pas perdu.