Maison >interface Web >tutoriel HTML >HTML5 Canvas prend-il en charge la double mise en mémoire tampon ?

HTML5 Canvas prend-il en charge la double mise en mémoire tampon ?

WBOY
WBOYavant
2023-08-19 11:05:111444parcourir

HTML5 Canvas支持双缓冲吗?

Pour une double mise en mémoire tampon de la toile, créez un deuxième élément de toile et dessinez dessus. Utilisez ensuite la méthode drawImage() pour dessiner l’image sur le premier canevas.

// canvas element
var canvas1 = document.getElementById('canvas');
var context1 = canvas1.getContext('2d');

// buffer canvas
var canvas2 = document.createElement('canvas');
canvas2.width = 250;
canvas2.height =250;
var context2 = canvas2.getContext('2d');

// create on the canvas
context2.beginPath();
context2.moveTo(10,10);
context2.lineTo(10,30);
context2.stroke();

//render the buffered canvas
context1.drawImage(canvas2, 0, 0);

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!

Déclaration:
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer