Canvas How to - Create TV noise analouge Fast

Question

We would like to know how to create TV noise analouge Fast.

Answer


<!--<!-- ww  w . j a  v  a2s .  co m-->
Code revised from
http://fiddle.jshell.net/AbdiasSoftware/FrMNL/
-->
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>//<![CDATA[ 
window.onload=function(){
var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d');
canvas.width = canvas.height = 256;
function resize() {
    canvas.style.width = window.innerWidth + 'px';
    canvas.style.height = window.innerHeight + 'px';
}
resize();
window.onresize = resize;
function noise(ctx) {
    var w = ctx.canvas.width,
        h = ctx.canvas.height,
        idata = ctx.createImageData(w, h),
        buffer32 = new Uint32Array(idata.data.buffer),
        len = buffer32.length,
        i = 0;
    for(; i < len;i++)
        if (Math.random() < 0.5) buffer32[i] = 0xff000000;
    ctx.putImageData(idata, 0, 0);
}
var toggle = true;
// added toggle to get 30 FPS instead of 60 FPS
(function loop() {
    toggle = !toggle;
    if (toggle) {
        requestAnimationFrame(loop);
        return;
    }
    noise(ctx);
    requestAnimationFrame(loop);
})();
}//]]>  
</script>
</head>
<body>
  <canvas id="canvas"></canvas>
</body>
</html>

The code above is rendered as follows: