客户端网页/屏幕生成视频噪音动图的脚本代码例子
看起来比较好的：
<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>