Animating canvas to infinitely animate the noise to give the appearance of movement in HTML

HTMLWeb DevelopmentFront End Technology

The putImageData() method places the image data onto the canvas. To animate canvas, we create a reusable ImageData object outside the main loop,

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);
}
raja
Published on 21-Mar-2018 09:39:49
Advertisements