2016.03.31
WEB

Canvas 超入門！ブラウザでお花見しましょ

フモデザインちーむ

こんにちは、デザインちーむのフモです。

皆さん、もうお花見はしましたか？

行く予定の人も、もう行った人も、ブラウザ上で疑似お花見しませんか？

というわけで、楽してお花見をするために、とてもシンプルですが Canvas で舞台を作ってみました。
今回はソース解説に Canvas の基本的な作成手順を含めてご紹介していきます。

※ Canvas 初心者が作っているので、超入門的な作成方法となっています。

1 まずはサンプルをご覧ください
2 ソース解説
3 まとめ

まずはサンプルをご覧ください

サンプル
（PCでもスマートフォンでも見られます）

HTML5/ Canvas で、桜舞い散るシーンを表現しています。
ブラウザ上のマウスの動きに合わせて、桜の散り具合が変わります。

ソース解説

基本のhtmlファイル

まずはHTML5でhtmlファイルを作成します。


<!DOCTYPE>
<html lang="ja">
    <head>
        <title></title>
        <meta charset="utf-8">
    </head>
    <body>
    </body>
</html>

今回は Canvas を複数作って、さらにそれらをレイヤー化して重ねていきます。
そのためには下の図のようなposition設定をしてあげることが必要です。
Canvas 超入門！ブラウザでお花見しましょ

まずは土台となるbodyにcssスタイルを設定します。
下記をhtmlの<head>内に加えましょう。


<style>
body{
position: relative;
background: #ffffff;
}
</style>

htmlファイルだけで進めたいので<head>内に書いているだけで、外部cssファイルにしても問題ありません。

JavaScriptで Canvas 作成

さて、ここからは全てJavaScriptでの記述になります。
というのも、JavaScriptで Canvas を書く習慣にしておいた方が、後々楽かな？と思うからです。
（three.jsとかもほとんどそうなので）

Canvas 作成

最初のレイヤーとなる Canvas を作ります。

<body>内に<script>タグを書き込み、その中に記述していきます。


//レイヤー1
var canvas1 = document.createElement('canvas');//Canvasを作成

document.body.appendChild(canvas1);//ノードリストに登録

var layer2ctx = canvas2.getContext('2d');//CanvasRenderingContext2D 取得

ここまでのサンプルを見る
ブラウザのソースを見ると、 Canvas が表示されていると思います。

ポイント: Canvas はノードリストに登録しないと表示されません。
また、ノードリストに登録した場所の直下に<canvas>が表示されます。
今回はbodyのノードリストに登録しましたが、任意のidがついた<div>などに登録することもできます。

CanvasRenderingContext2Dを取得: Canvas には2D用と3D用の2種類のレンダリングコンテキストオブジェクトがあり、モノを描画するのに必要なAPIの大半がこれらのコンテキストによって提供されます。
getContext(‘2d’) は2D（単純でフラットな描画）用の CanvasRenderingContext2D を取得します。

大きさ、cssスタイル設定

次に、作った Canvas の大きさとcssスタイルを設定します。


//大きさ設定
canvas1.width = 800;
canvas1.height = 600;

//css設定
canvas1.style.position = "absolute";
canvas1.style.top = "0";
canvas1.style.left = "0";
canvas1.style.zIndex = "0";

//○○.style.プロパティ = "";
//でcss設定が可能です。

必要な分だけコピペで作成

この調子で、必要なレイヤーの数だけ Canvas を作成します。


//レイヤー1
var canvas1 = document.createElement('canvas');//Canvas作成

canvas1.width = 800;//Canvas横幅
canvas1.height = 600;//Canvas高さ

//css設定
canvas1.style.position = "absolute";
canvas1.style.top = "0";
canvas1.style.left = "0";
canvas1.style.zIndex = "0";

document.body.appendChild(canvas1);//ノードリストに登録
var layer1ctx = canvas1.getContext('2d');//CanvasRenderingContext2D 取得

//レイヤー2
var canvas2 = document.createElement('canvas');

canvas2.width = 800;
canvas2.height = 600;

canvas2.style.position = "absolute";
canvas2.style.top = "0";
canvas2.style.left = "0";
canvas2.style.zIndex = "1";//レイヤー1より上に表示

document.body.appendChild(canvas2);
var layer2ctx = canvas2.getContext('2d');

ポイント: レイヤーとして重ねるので、z-indexは重ねる順で数値を設定していきます。

画像を描画

次は Canvas に画像を表示させます。


//レイヤー1の画像
var img1 = new Image();//新しい画像を作成
            img1.onload = function(){//画像を読み込み終わってから
                layer1ctx.drawImage(img1, 0, 0);
            };
            img1.src = "layer1.png";//表示させたい画像

ポイント: Canvas で画像を表示させたい場合、「画像の読み込みが終わってから表示する」設定をしないとうまく表示されないことがあります。

今回使ったのはこの２枚。
Canvas 超入門！ブラウザでお花見しましょ

画像の描画も必要な分だけコピペで設定してあげればOK。
重なり順などは前述でしてあるので、ブラウザにはきちんと画像が2枚重なって表示されるはずです。

ポイント: Canvas では png, jpg, gif, svg などの画像ファイルを扱うことができます。
Canvas はデフォルトだと透明色なので、描画する画像も透過させておけば何枚でも重ねて見えるようにすることができます。

花びらが散る描写

こちらはサンプルだと3枚目のレイヤーに表示しています。
※一番上のレイヤーでないと、マウスに付随した動きが動作しないため。

3枚目の Canvas を作成して、そこに桜吹雪を描画している部分はこちら。


window.onload = function(){

    var timer = setInterval(timerFunc,30);
    var canvas3 = document.createElement('canvas');

    //ノードリストに登録
    document.body.appendChild(canvas3);

    mainCanvasContext = canvas3.getContext("2d");
    canvas3.width = 800;
    canvas3.height = 600;

    canvas3.style.position = "absolute";
    canvas3.style.top = "0";
    canvas3.style.left = "0";
    canvas3.style.zIndex = "2";

    stageX = canvas3.width;
    stageY = canvas3.height;
    init();
    canvas3.onmousemove = function(e){
    mouseX=e.clientX;
    mouseY=e.clientY;
    windVelX = (0.5 - mouseX / stageX)*35;
    windVelY = (0.6 - mouseY / stageY)*15;
    };
};

元のコードはjs doitからお借りしました。

桜吹雪部分のコード詳細はサンプルページのソースをご覧ください。
ちょこっとカスタマイズした部分にはコメントを入れています。