狠狠撸

HTML5 Canvasを学びたい人に送るCanvasの超基本とその後の学習方針

Twitter: @irration

Blog: http://kinokoru.jp/

<html>
<head>
<script>
window.onload = function(){
var cv = document.getElementById('cv');
var ctx = cv.getContext('2d');
ctx.fillStyle = '#F00';
ctx.fillRect(10,10,100,100);
}
</script>
</head>
<body>
<canvas id="cv" width="500" height="300"></canvas>
</body>
</html>

3. <body> ~ </body> の間に
以下のコードを書いて下さい。
<canvas id="cv" width="500" height="300"></canvas>

これが描画を行うための「キャンバス」となります。
上の場合、横幅500、高さ300のキャンバスになります。

4. <head> ~ </head> の間に

<script>
</script>
JavaScriptにより描画をするための部分となります。

5. <script> ~ </script> の間に

window.onload = function(){
}
「ページが読み込まれたら { } 内の処理を実行」

6. { } の間に以下のコードを書いて下さい。

var cv = document.getElementById(‘cv’);
HTML の canvas 要素をJavaScriptでいじるための指定です。
「どきゅめんとどっとげっとえれめんとばいあいでぃー」
大文字?小文字?「l」と「I」のミスタイプに注意。

7. 6で書いたコードの下に以下のコードを書きます。

var ctx = cv.getContext(‘2d’);
Canvasではこの「コンテキスト」という存在を通じて
色の変更、描画などの処理を行います。
いわばコンテキストは「絵を描く人」のような存在です。
上のコードでは、「cv」というキャンバスに絵を描いてもらう
ために画家を用意するイメージです。


ctx.fillStyle = ‘#F00’;
絵を描く人に対して、
「色を塗るときは#F00(赤色)でよろしくお願いします」
とお願いしています。


ctx.fillRect(10, 10, 100, 100);
絵を描く人に対して
「キャンバスの左上から10pxの所から、
縦横100pxの範囲を四角に塗っちゃって下さい」
とお願いしているイメージです。

描画前に雪インスタンスを生成し、
配列につっこんでおく。
( 以下は 50 個の雪インスタンスを格納する例 )
var snows = [];
for( var i = 0; i < 50; i++ ){
snows.push( new Snow() );
}

setInterval 関数で描画。
setInterval(function(){
:
for( var i = 0; I < snows.length; i++ ) {
snows[i].draw();
}
:
}, 30)

ここら辺の勘所が学べる
良い教材

CodePlayer
http://thecodeplayer.com/
↓ここら辺の教材を何回か写経すると
何となく勘所がつかめてくる
http://thecodeplayer.com/walkthrough/make-aparticle-system-in-html5-canvas

CODEPREP
http://codeprep.jp/
「オブジェクト指向入門」
オブジェクト指向を学びつつ
Canvasでパーティクルの勉強もできる。
http://codeprep.jp/ja/books/book/36

ありがとうございました

狠狠撸

HTML5 Canvasを学びたい人に送る Canvasの超基本とその後の学習方針

More Related Content

HTML5 Canvasを学びたい人に送る Canvasの超基本とその後の学習方針

HTML5 Canvasを学びたい人に送るCanvasの超基本とその後の学習方針

HTML5 Canvasを学びたい人に送るCanvasの超基本とその後の学習方針