Post on 24-May-2015
description
<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>
<canvas id="cv" width="500" height="300"></canvas>
3. <body> ~ </body> の間に以下のコードを書いて下さい。
これが描画を行うための「キャンバス」となります。上の場合、横幅500、高さ300のキャンバスになります。
<script>
</script>
4. <head> ~ </head> の間に以下のコードを書いて下さい。
JavaScriptにより描画をするための部分となります。
window.onload = function(){
}
5. <script> ~ </script> の間に以下のコードを書いて下さい。
「ページが読み込まれたら { } 内の処理を実行」
6. { } の間に 以下のコードを書いて下さい。
HTML の canvas 要素をJavaScriptでいじるための指定です。「どきゅめんと どっと げっと えれめんと ばい あいでぃー」大文字・小文字・「l」と「I」のミスタイプに注意。
var cv = document.getElementById(‘cv’);
7. 6で書いたコードの下に以下のコードを書きます。
Canvasでは この「コンテキスト」という存在を通じて色の変更、描画などの処理を行います。いわば コンテキストは「絵を描く人」のような存在です。上のコードでは、「cv」というキャンバスに絵を描いてもらうために 画家を用意するイメージです。
var ctx = cv.getContext(‘2d’);
8. 7で書いたコードの下に以下のコードを書きます。
絵を描く人に対して、「色を塗るときは#F00(赤色)でよろしくお願いします」とお願いしています。
ctx.fillStyle = ‘#F00’;
9. 8で書いたコードの下に以下のコードを書きます。
絵を描く人に対して「キャンバスの左上から10pxの所から、縦横100pxの範囲を四角に塗っちゃって下さい」とお願いしているイメージです。
ctx.fillRect(10, 10, 100, 100);
var snows = [];
for( var i = 0; i < 50; i++ ){
snows.push( new Snow() );
}
描画前に雪インスタンスを生成し、配列につっこんでおく。( 以下は 50 個の雪インスタンスを格納する例 )
setInterval(function(){
:
for( var i = 0; I < snows.length; i++ ) {
snows[i].draw();
}
:
}, 30)
setInterval 関数で描画。
ここら辺の勘所が学べる良い教材
CodePlayerhttp://thecodeplayer.com/
↓ここら辺の教材を何回か写経すると何となく勘所がつかめてくるhttp://thecodeplayer.com/walkthrough/make-a-
particle-system-in-html5-canvas
CODEPREPhttp://codeprep.jp/
「オブジェクト指向入門」オブジェクト指向を学びつつCanvasでパーティクルの勉強もできる。http://codeprep.jp/ja/books/book/36
ありがとうございました