HTML5 Canvasを学びたい人に送る Canvasの超基本とその後の学習方針
•
16 likes•8,511 views
「HTML5 Canvasをいじってみたいけど、なんか難しそうだし手を出しづらいんだよなあ」という人を対象とした HTML5 Canvas の超基本として 四角形の描画を紹介します。 また、応用として複雑なア��メーションをつくっていく上での勘所の紹介と、勘所を学ぶ上で役に立つ教材の紹介も行います。
Report
Share
HTML5 Canvasを学びたい人に送る Canvasの超基本とその後の学習方針
- 9. <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>
- 13. 3. <body> ~ </body> の間に 以下のコードを書いて下さい。 <canvas id="cv" width="500" height="300"></canvas> これが描画を行うための「キャンバス」となります。 上の場合、横幅500、高さ300のキャンバスになります。
- 14. 4. <head> ~ </head> の間に 以下のコードを書いて下さい。 <script> </script> JavaScriptにより描画をするための部分となります。
- 15. 5. <script> ~ </script> の間に 以下のコードを書いて下さい。 window.onload = function(){ } 「ページが読み込まれたら { } 内の処理を実行」
- 16. 6. { } の間に 以下のコードを書いて下さい。 var cv = document.getElementById(‘cv’); HTML の canvas 要素をJavaScriptでいじるための指定です。 「どきゅめんと どっと げっと えれめんと ばい あいでぃー」 大文字・小文字・「l」と「I」のミスタイプに注意。
- 17. 7. 6で書いたコードの下に以下のコードを書きます。 var ctx = cv.getContext(‘2d’); Canvasでは この「コンテキスト」という存在を通じて 色の変更、描画などの処理を行います。 いわば コンテキストは「絵を描く人」のような存在です。 上のコードでは、「cv」というキャンバスに絵を描いてもらう ために 画家を用意するイメージです。
- 18. 8. 7で書いたコードの下に以下のコードを書きます。 ctx.fillStyle = ‘#F00’; 絵を描く人に対して、 「色を塗るときは#F00(赤色)でよろしくお願いします」 とお願いしています。
- 19. 9. 8で書いたコードの下に以下のコードを書きます。 ctx.fillRect(10, 10, 100, 100); 絵を描く人に対して 「キャンバスの左上から10pxの所から、 縦横100pxの範囲を四角に塗っちゃって下さい」 とお願いしているイメージです。
- 44. 描画前に雪インスタンスを生成し、 配列につっこんでおく。 ( 以下は 50 個の雪インスタンスを格納する例 ) var snows = []; for( var i = 0; i < 50; i++ ){ snows.push( new Snow() ); }
- 45. setInterval 関数で描画。 setInterval(function(){ : for( var i = 0; I < snows.length; i++ ) { snows[i].draw(); } : }, 30)
- 46. ここら辺の勘所が学べる 良い教材
- 49. ありがとうございました