Heim > Web-Frontend > HTML-Tutorial > Unterstützt HTML5 Canvas doppelte Pufferung?

Unterstützt HTML5 Canvas doppelte Pufferung?

WBOY
Freigeben: 2023-08-19 11:05:11
nach vorne
1478 Leute haben es durchsucht

HTML5 Canvas支持双缓冲吗?

Um die Leinwand doppelt zu puffern, erstellen Sie ein zweites Leinwandelement und zeichnen Sie darauf. Verwenden Sie dann die Methode drawImage(), um das Bild auf die erste Leinwand zu zeichnen.

// 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);
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonUnterstützt HTML5 Canvas doppelte Pufferung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:tutorialspoint.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage