客户端网页/屏幕生成视频噪音动图的脚本代码例子

看起来比较好的:

<html>

<head>
</head>

<body>
<canvas id=myCanvas0 width=1600 height=320></canvas>
</body>

<script>
var li_w = myCanvas0.width;
var li_h = myCanvas0.height;
var lg_ocanvas = document.createElement("canvas");
lg_ocanvas.width = li_w << 1;
lg_ocanvas.height = li_h << 1;

var lc_Ocontext = lg_ocanvas.getContext("2d", {
alpha: false
});
var canvas_data = lc_Ocontext.createImageData(lg_ocanvas.width, lg_ocanvas.height);
var vbuff = new Uint8Array(canvas_data.data.buffer);

// render noise once, to the offscreen-canvas
whitenoise(lc_Ocontext);

// main loop draw the offscreen canvas to random offsets
var lc_context = myCanvas0.getContext("2d", {
alpha: false
});
(function loop() {
var li_x = (li_w * Math.random()) | 0;
var li_y = (li_h * Math.random()) | 0;

lc_context.drawImage(lg_ocanvas, -li_x, -li_y);
requestAnimationFrame(loop)
})()

function whitenoise(lc_context) {
var li_len = vbuff.length - 1;
while (li_len--) vbuff[li_len] = Math.random() < 0.5 ? 0 : -1 >> 0;
lc_context.putImageData(canvas_data, 0, 0);
}
</script>

</html>

Uint8Array 如果改成 Uint32Array 会更酷, 但是在 (linux) GOOGLE CHROME BROWSER 上会失效或者很难看出效果,虽然在 FIREFOX 上很正常。 因此,俺用 Uint8Array 而不是 Uint32Array。

比较简短的:

<html>

<head>
</head>

<body>
<canvas id=myCanvas0 width=1200 height=600></canvas>
</body>

<script>
var lc_context0 = myCanvas0.getContext("2d", {
alpha: false
});
var canvas_data = lc_context0.createImageData(myCanvas0.width, myCanvas0.height);
var vbuffer = new Uint8Array(canvas_data.data.buffer);

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

function noise(lc_context0) {
var li_len = vbuffer.length - 1;
while (li_len--) vbuffer[li_len] = Math.random() < 0.5 ? 0 : -1 >> 0;
lc_context0.putImageData(canvas_data, 0, 0);
}
</script>

</html>

Uint8Array 如果改成 Uint32Array 会更酷, 但是在 (linux) GOOGLE CHROME BROWSER 上会失效或者很难看出效果,虽然在 FIREFOX 上很正常。 因此,俺用 Uint8Array 而不是 Uint32Array。

其他

这个有滚屏效果, 动感十足。

<html>

<head>
</head>

<body>
<canvas id="myCanvas0" width="800" height="600"></canvas>

</body>

<script>
var canvas = null;
var context = null;
var time = 0;
var intervalId = 0;

var makeNoise = function() {
var imgd = context.createImageData(canvas.width, canvas.height);
var pix = imgd.data;

for (var i = 0, n = pix.length; i < n; i += 4) {
var c = 7 + Math.sin(i / 50000 + time / 7); // A sine wave of the form sin(ax + bt)
pix[i] = pix[i + 1] = pix[i + 2] = 40 * Math.random() * c; // Set a random gray
pix[i + 3] = 255; // 100% opaque
}

context.putImageData(imgd, 0, 0);
time = (time + 1) % canvas.height;
}

var setup = function() {
canvas = document.getElementById("myCanvas0");
context = canvas.getContext("2d");
}

setup();
intervalId = setInterval(makeNoise, 50);
</script>

</html>

参考链接

计算机随机生成一个数是不是真的是随机的?