読者です 読者をやめる 読者になる 読者になる

one's way blog

ワクワクを生み出せるWebエンジニアを目指して。

【18:スクラッチくじ】Canvasをレイヤーの様に使う

f:id:seintoseiya:20150702212803p:plain
プロジェクトNo.18:スクラッチくじ

Canvasを2枚重ねて、前面のcanvasをマウスダウンとマウスムーブで消すといったものを作りました。

Canvasをレイヤーの様に使うために

まずHTMLで2つのcanvasエレメントを用意します。

HTML
<canvas id="parent" width="400" height="300"></canvas>
<canvas id="child" width="400" height="300"></canvas>

次にCSScanvasに対してposition: absoluteを指定。

CSS
canvas{
	position: absolute;
}
 ||<

あとは、JavaScriptの方でそれぞれのcanvasエレメントに対してオブジェクト生成し、
それぞれに処理を行っていきます。
***JavaScript
>|javascript|
$(function(){
    var canvas = document.getElementById('parent');
    var canvas2 = document.getElementById('child');
    if(!canvas || !canvas.getContext) return false;
    if(!canvas2 || !canvas2.getContext) return false;
    var ctx = canvas.getContext('2d');
    var ctx2 = canvas2.getContext('2d’);

    // 省略

}

今回は背面レイヤにおみくじの文字をランダムで描画して、
前面レイヤにcanvasと同じサイズでグレーの四角形を描画しました。
あとは、jQueryのmouseイベントとclearRectで前面レイヤだけを切り取り(削る)できる様になっています。

関連アプリ・書籍

HTML5&CSS3レッスンブック

HTML5&CSS3レッスンブック

jQuery入門道場

jQuery入門道場