Canvasをサイトの背景にしよう3
●サイト背景に画像(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と同じです。