ほんっとにはじめてのHTML5とCSS3
<canvas>サンプル11-3

Canvasをサイトの背景にしよう3

●サイト背景に画像(PNG)をランダムに描く

サイト背景に画像(PNG)をランダムに描く

このサンプルの Canvas は、サンプル2と同じ方法で生成しています。
Canvas には、PNGファイル5種類をランダムに回転させながら描画します。
ページのリロードや、リサイズのたびに背景が変化します。

使用している画像はこちら。

このサンプルでは、javaScriptを外部ファイルにして呼び出しています(5行目)。

<body style="background:#7db9e8;">
<div id="container"> <!--ここにコンテンツが入ります--></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script src="js/smp69_11_3.js"></script>
<script>
$(function () {
	Draw();
	$(window).resize(function() {
		Draw();
	});
});
</script>
</body>

外部ファイル「smp69_11_3.js」では、5つの画像に対して同じソースを繰り返しています。共通部分をまとめて書く方法があるのでしょうが、javaScript初心者にはこれで精一杯。
ただし、1つ1つの画像に個別に指定できるので、画像ごとに描画個数を変えたりできます。
外部ファイル「smp69_11_3.js」の内容です↓

function Draw() {
	var bodyNode = document.getElementsByTagName('body').item(0);
	var containerNode = document.getElementById('container');
	var newCanvas = document.createElement('canvas');
	var newDiv = document.createElement('div');
	newDiv.id = 'wrapper'; // 新しく作ったdivのidの指定
	// 新しく作ったdivの中にcanvasを入れる
	newDiv.appendChild(newCanvas);
	// 新しく作ったdivを#containerの前に挿入する
	bodyNode.insertBefore(newDiv, containerNode);
	// canvasのサイズを新しいdivからもらう
	$('canvas').attr({height:$('#wrapper').height()});
	$('canvas').attr({width:$('#wrapper').width()});
	
	// canvasへの描画
	var ctx = newCanvas.getContext('2d');
	var cW = newCanvas.width, //canvasの幅
	    cH = newCanvas.height; //canvasの高さ
		
//ここまで↑はサンプル2と同じです
//ここから↓このサンプル3のオリジナル
	var grad  = ctx.createLinearGradient(0,0,cW,cH); //canvas全体に斜めのグラデ
	grad.addColorStop(0,'#7db9e8');
	grad.addColorStop(0.8,'#bff1ff');
	ctx.fillStyle = grad;
	ctx.fillRect(0,0,cW,cH);

	ctx.globalAlpha = 0.5; // 描画の透明度を50%にする
	
	//1つめの画像をランダムに、回転させながら
	var imgHana1 = new Image();
	imgHana1.src = "img/hana1.png";
	imgHana1.onload = function(){
		for(var i = 0; i < 20; i++) {
		// 描画の位置(x,y)をランダムに
		// 最後に画像幅や画像高さの2分の1を引いて、画像の中心がウィンドウのエッジに来るようにしています
        var x = Math.floor(Math.random() * cW -imgHana1.width/2);
        var y = Math.floor(Math.random() * cH -imgHana1.height/2);
		// 回転をランダムに決定する
		var angle = Math.floor(Math.random()*360);
		var rad = angle * Math.PI/180;
		if(angle > 360) angle = 0;
		var cx = x + imgHana1.width/2;
		var cy = y + imgHana1.height/2;
		// 画像の中心を回転軸にして回転
		ctx.setTransform(Math.cos(rad), Math.sin(rad), -Math.sin(rad), Math.cos(rad),cx-cx*Math.cos(rad)+cy*Math.sin(rad),cy-cx*Math.sin(rad)-cy*Math.cos(rad));
		ctx.drawImage(imgHana1, x, y);
		}
	};
	//2つめ
	var imgHana2 = new Image();
	imgHana2.src = 'img/hana2.png';
	imgHana2.onload = function(){
		for(var i = 0; i < 10; i++) {
        var x = Math.floor(Math.random() * cW -imgHana2.width/2);
        var y = Math.floor(Math.random() * cH -imgHana2.height/2);
		var angle = Math.floor(Math.random()*360);
		var rad = angle * Math.PI/180;
		if(angle > 360) angle = 0;
		var cx = x + imgHana2.width/2;
		var cy = y + imgHana2.height/2;
		ctx.setTransform(Math.cos(rad), Math.sin(rad), -Math.sin(rad), Math.cos(rad),cx-cx*Math.cos(rad)+cy*Math.sin(rad),cy-cx*Math.sin(rad)-cy*Math.cos(rad));
		ctx.drawImage(imgHana2, x, y);
		}
	};
	//3つめ
	var imgHana3 = new Image();
	imgHana3.src = 'img/hana3.png';
	imgHana3.onload = function(){
		for(var i = 0; i < 30; i++) {
        var x = Math.floor(Math.random() * cW -imgHana3.width/2);
        var y = Math.floor(Math.random() * cH -imgHana3.height);
		var angle = Math.floor(Math.random()*360);
		var rad = angle * Math.PI/180;
		if(angle > 360) angle = 0;
		var cx = x + imgHana3.width/2;
		var cy = y + imgHana3.height/2;
		ctx.setTransform(Math.cos(rad), Math.sin(rad), -Math.sin(rad), Math.cos(rad),cx-cx*Math.cos(rad)+cy*Math.sin(rad),cy-cx*Math.sin(rad)-cy*Math.cos(rad));
		ctx.drawImage(imgHana3, x, y);
		}
	};
	//4つめ
	var imgHana4 = new Image();
	imgHana4.src = 'img/hana4.png';
	imgHana4.onload = function(){
		for(var i = 0; i < 10; i++) {
        var x = Math.floor(Math.random() * cW -imgHana4.width/2);
        var y = Math.floor(Math.random() * cH -imgHana4.height/2);
		var angle = Math.floor(Math.random()*360);
		var rad = angle * Math.PI/180;
		if(angle > 360) angle = 0;
		var cx = x + imgHana4.width/2;
		var cy = y + imgHana4.height/2;
		ctx.setTransform(Math.cos(rad), Math.sin(rad), -Math.sin(rad), Math.cos(rad),cx-cx*Math.cos(rad)+cy*Math.sin(rad),cy-cx*Math.sin(rad)-cy*Math.cos(rad));
		ctx.drawImage(imgHana4, x, y);
		}
	};
	//5つめ
	var imgHana5 = new Image();
	imgHana5.src = 'img/hana5.png';
	imgHana5.onload = function(){
		for(var i = 0; i < 30; i++) {
        var x = Math.floor(Math.random() * cW -imgHana5.width/2);
        var y = Math.floor(Math.random() * cH -imgHana5.height/2);
		var angle = Math.floor(Math.random()*360);
		var rad = angle * Math.PI/180;
		if(angle > 360) angle = 0;
		var cx = x + imgHana5.width/2;
		var cy = y + imgHana5.height/2;
		ctx.setTransform(Math.cos(rad), Math.sin(rad), -Math.sin(rad), Math.cos(rad),cx-cx*Math.cos(rad)+cy*Math.sin(rad),cy-cx*Math.sin(rad)-cy*Math.cos(rad));
		ctx.drawImage(imgHana5, x, y);
		}
	};
};

画像をランダムに回転させるために setTransform() を使っています。
これは「JavaScript:雪が降る(canvasで複数画像を回転) | 人生は読めないブログ」を参考にさせていただきました。

乱数については「[69-6] canvasにマウスの動きに合わせて描画しよう - Math.random() について」をご覧ください。
回転については「[69-9] canvasでグラフィックスの変形をしよう」をご覧ください。
画像を描画する drawImage() については「[69-4] canvasに画像を描画しよう」をご覧ください。

CSSはサンプル1と同じです。