[JS]画像を使用せずに、canvasでテレビの砂嵐を描くチュートリアル

画像を使用せずに、canvasでテレビの砂嵐のようなノイズを描くチュートリアルを紹介します。

How to Generate Noise with Canvas
デモページ（当方作成）

[ad#ad-2]

JavaScript

function generateNoise(opacity) {
if ( !!!document.createElement('canvas').getContext ) {
return false;
}
var canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d'),
x, y,
r, g, b,
opacity = opacity || .2;

canvas.width = 100;
canvas.height = 100;

for ( x = 0; x < canvas.width; x++ ) { for ( y = 0; y < canvas.height; y++ ) { r = Math.floor( Math.random() * 255 ); g = Math.floor( Math.random() * 255 ); b = Math.floor( Math.random() * 255 ); ctx.fillStyle = 'rgba(' + r + ',' + g + ',' + b + ',' + opacity + ')'; ctx.fillRect(x, y, 1, 1); } } document.body.style.backgroundImage = "url(" + canvas.toDataURL("image/png") + ")"; } generateNoise(.5); [/javascript]

最後の行の「generateNoise(.5);」の値を変えることで、ノイズの量を変更することができます。

「generateNoise(.5);」、デモページと同じ

「generateNoise(.3);」に変更したデモ

「generateNoise(.8);」に変更したデモ

CSS

ベースとなる背景色をスタイルシートで指定します。
CSS3 Transitionsでアニメーションを加えても面白いです。

body{
	background: white;
}

さらに背景色を変更することで、さらに面白い効果が得られます。

「background: green;」に変更したデモ

「background: orange;」に変更したデモ