Animieren Sie die Leinwand, um Rauschen stufenlos zu animieren und den Eindruck von Bewegung in HTML zu erwecken

Die Methode

putImageData() platziert Bilddaten auf der Leinwand. Um die Leinwand zu animieren, erstellen wir ein wiederverwendbares ImageData-Objekt außerhalb der Hauptschleife,

var ct = c.getContext("2d", {alpha: false});       // context without alpha channel.
var a = ct.createImageData(c.width, c.height);  
var buffer = new Uint32Array(a.data.buffer);  

function loop() {
   noise(ct);
   requestAnimationFrame(loop)
})()

function noise(ct) {
   var l =buffer.length - 1;
   while(l--) buffer[l] = Math.random() <0.5 ?0 : -1>>0;
   ct.putImageData(a, 0, 0);
}

Das obige ist der detaillierte Inhalt vonAnimieren Sie die Leinwand, um Rauschen stufenlos zu animieren und den Eindruck von Bewegung in HTML zu erwecken. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!