Partage
  • Partager sur Facebook
  • Partager sur Twitter

Effacer un canvas en position fixed

... avec un site web derrière

    21 octobre 2011 à 10:19:13

    Bien le bonjour à tous :)

    Je reviens à la charge avec un nouveau problème: cette-fois ci de canvas.
    J'ai un canvas en position fixed avec un background transparent qui recouvre tout mon site web (top: 0; left: 0; bottom: 0; right: 0) et je voudrais pouvoir bouger un carré dessus avec les touches directionnelles.

    Le problème pour animer un carré sans "laisser des traces", c'est d'effacer ses traces derrière.
    Les techniques les plus courantes sur le web consistent à soit redessiner un carré blanc à l'ancien emplacement pour éviter que les anciens carrés ne fassent une traînée, ou carrément d'effacer le canvas en redessinant par dessus un rectangle blanc de la même taille que le canvas.

    Ces solutions fonctionnent bien sauf quand évidement j'ai mon site web derrière mon canvas, qui du coup est masqué par le rectangle blanc d'effacement, ce qui fait que je me retrouve avec mon carré animé, mais sur une page blanche (et non pas avec mon site en fond comme je le voudrais).

    J'ai vu plusieurs solutions avec notemment des .clearCanvas() qui ne fonctionne pas ou qui sont des fonctions utilisateurs qui réagissent exactement comme je vous l'ai décris, bref çà m'intéresse pas :/

    Quelqu'un aurait t-il une idée sur le pourquoi du comment ?

    Merci d'avance :)
    Jeff

    • Partager sur Facebook
    • Partager sur Twitter
      21 octobre 2011 à 14:10:15

      As tu pensé a utiliser clearRect(x,y,w,h)?
      • Partager sur Facebook
      • Partager sur Twitter
        21 octobre 2011 à 16:28:13

        Après coup j'ai effectivement découvert clearRect() et essayé. Ça fonctionne bien comme je le souhaite, mais en revanche le carré lag pas mal lorsqu'il se déplace en continue.

        Je rafraîchit ma methode .run() avec un setTimeout() récursif toutes les 35 milli-secondes (pas plus sinon c'est pas fluide), c'est peut-être le faire d'effacer à chaque fois et de redessiner qui le fait lagguer.

        Ce qui est bizarre c'est que tout fonctionne à merveille sur ce script (que j'ai pris pour exemple) : http://www.m-ms.dk/spaceheroes/ : Lorsqu'on ajoute le bouton dans les favoris et qu'on clique dessus, un petit vaisseau M&M's apparaît et on peut le déplacer sur l'écran avec les flèches, et surtout c'est super fluide.
        J'ai fouiné un peu, et c'est également réalisé en canvas, mais en revanche je pige pas à quel moment ils redessinent à chaque frame.
        • Partager sur Facebook
        • Partager sur Twitter

        Effacer un canvas en position fixed

        × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
        × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
        • Editeur
        • Markdown