Le canevas HTML5 implémente une simple double mise en mémoire tampon

Il y a beaucoup de choses intéressantes sur le canevas HTML5, telles que la demande de frameworks d'animation et la création d'animations avec JavaScript. L'article d'aujourd'hui vous explique comment implémenter une double mise en mémoire tampon simple dans le canevas HTML5. Les amis dans le besoin peuvent jeter un œil aux méthodes. article.

Pour un contenu plus avancé, vous souhaiterez peut-être utiliser Canvas, qui est généralement accéléré par GPU et permet des fréquences d'images assez élevées et stables à l'aide de window.request.tionFrame. (Cours recommandé : Tutoriel vidéo HTML5)

Si vous avez besoin de doubler la mémoire tampon sur le canevas, une approche populaire consiste à créer un deuxième élément de canevas et à dessiner sur cet élément de canevas, puis à utiliser drawImage. pour dessiner l'image finie sur le canevas principal, et le résultat est le suivant :

var primaryCtx = document.getElementById("canvas").getContext("2d");
var secondaryCanvas = document.createElement("canvas"),
      secondaryCtx = secondaryCanvas.getContext("2d");
      (function drawFrame() {
    requestAnimationFrame(drawFrame);
    secondaryCtx.fillStyle = "#f00";
    secondaryCtx.fillRect(10,10,20,20);
    primaryCtx.drawImage(secondaryCanvas);
    })();

Entrez CTX.SAVER() et CTX.Rebug()

Aujourd'hui, j'ai découvert que il existe un moyen de faire plus de Clean, qui fonctionne aussi bien que la méthode ci-dessus :

(function drawFrame() {
    requestAnimationFrame(drawFrame);
    primaryCtx.save(); //Freeze redraw
    primaryCtx.fillStyle = "#f00";
    primaryCtx.fillRect(10,10,20,20);
    primaryCtx.restore(); //And now do the redraw
    })();

Malgré le nom étrange, il fige simplement le rendu du contexte, puis reprend le rendu une fois le dessin terminé.

Cet article se termine ici. Pour un contenu plus passionnant, vous pouvez faire attention à la colonne Tutoriel vidéo associée sur le site Web php chinois ! ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!