html5 canvasを学びたい人に送るcanvasの超基本とその後の学習方針
DESCRIPTION
「HTML5 Canvasをいじってみたいけど、なんか難しそうだし手を出しづらいんだよなあ」という人を対象とした HTML5 Canvas の超基本として 四角形の描画を紹介します。 また、応用として複雑なアニメーションをつくっていく上での勘所の紹介と、勘所を学ぶ上で役に立つ教材の紹介も行います。TRANSCRIPT
![Page 1: HTML5 Canvasを学びたい人に送るCanvasの超基本とその後の学習方針](https://reader036.vdocuments.us/reader036/viewer/2022062405/55615272d8b42a8a7d8b50b2/html5/thumbnails/1.jpg)
![Page 2: HTML5 Canvasを学びたい人に送るCanvasの超基本とその後の学習方針](https://reader036.vdocuments.us/reader036/viewer/2022062405/55615272d8b42a8a7d8b50b2/html5/thumbnails/2.jpg)
![Page 3: HTML5 Canvasを学びたい人に送るCanvasの超基本とその後の学習方針](https://reader036.vdocuments.us/reader036/viewer/2022062405/55615272d8b42a8a7d8b50b2/html5/thumbnails/3.jpg)
![Page 5: HTML5 Canvasを学びたい人に送るCanvasの超基本とその後の学習方針](https://reader036.vdocuments.us/reader036/viewer/2022062405/55615272d8b42a8a7d8b50b2/html5/thumbnails/5.jpg)
![Page 6: HTML5 Canvasを学びたい人に送るCanvasの超基本とその後の学習方針](https://reader036.vdocuments.us/reader036/viewer/2022062405/55615272d8b42a8a7d8b50b2/html5/thumbnails/6.jpg)
![Page 7: HTML5 Canvasを学びたい人に送るCanvasの超基本とその後の学習方針](https://reader036.vdocuments.us/reader036/viewer/2022062405/55615272d8b42a8a7d8b50b2/html5/thumbnails/7.jpg)
![Page 8: HTML5 Canvasを学びたい人に送るCanvasの超基本とその後の学習方針](https://reader036.vdocuments.us/reader036/viewer/2022062405/55615272d8b42a8a7d8b50b2/html5/thumbnails/8.jpg)
![Page 9: HTML5 Canvasを学びたい人に送るCanvasの超基本とその後の学習方針](https://reader036.vdocuments.us/reader036/viewer/2022062405/55615272d8b42a8a7d8b50b2/html5/thumbnails/9.jpg)
<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>
![Page 10: HTML5 Canvasを学びたい人に送るCanvasの超基本とその後の学習方針](https://reader036.vdocuments.us/reader036/viewer/2022062405/55615272d8b42a8a7d8b50b2/html5/thumbnails/10.jpg)
![Page 11: HTML5 Canvasを学びたい人に送るCanvasの超基本とその後の学習方針](https://reader036.vdocuments.us/reader036/viewer/2022062405/55615272d8b42a8a7d8b50b2/html5/thumbnails/11.jpg)
![Page 12: HTML5 Canvasを学びたい人に送るCanvasの超基本とその後の学習方針](https://reader036.vdocuments.us/reader036/viewer/2022062405/55615272d8b42a8a7d8b50b2/html5/thumbnails/12.jpg)
![Page 13: HTML5 Canvasを学びたい人に送るCanvasの超基本とその後の学習方針](https://reader036.vdocuments.us/reader036/viewer/2022062405/55615272d8b42a8a7d8b50b2/html5/thumbnails/13.jpg)
<canvas id="cv" width="500" height="300"></canvas>
3. <body> ~ </body> の間に以下のコードを書いて下さい。
これが描画を行うための「キャンバス」となります。上の場合、横幅500、高さ300のキャンバスになります。
![Page 14: HTML5 Canvasを学びたい人に送るCanvasの超基本とその後の学習方針](https://reader036.vdocuments.us/reader036/viewer/2022062405/55615272d8b42a8a7d8b50b2/html5/thumbnails/14.jpg)
<script>
</script>
4. <head> ~ </head> の間に以下のコードを書いて下さい。
JavaScriptにより描画をするための部分となります。
![Page 15: HTML5 Canvasを学びたい人に送るCanvasの超基本とその後の学習方針](https://reader036.vdocuments.us/reader036/viewer/2022062405/55615272d8b42a8a7d8b50b2/html5/thumbnails/15.jpg)
window.onload = function(){
}
5. <script> ~ </script> の間に以下のコードを書いて下さい。
「ページが読み込まれたら { } 内の処理を実行」
![Page 16: HTML5 Canvasを学びたい人に送るCanvasの超基本とその後の学習方針](https://reader036.vdocuments.us/reader036/viewer/2022062405/55615272d8b42a8a7d8b50b2/html5/thumbnails/16.jpg)
6. { } の間に 以下のコードを書いて下さい。
HTML の canvas 要素をJavaScriptでいじるための指定です。「どきゅめんと どっと げっと えれめんと ばい あいでぃー」大文字・小文字・「l」と「I」のミスタイプに注意。
var cv = document.getElementById(‘cv’);
![Page 17: HTML5 Canvasを学びたい人に送るCanvasの超基本とその後の学習方針](https://reader036.vdocuments.us/reader036/viewer/2022062405/55615272d8b42a8a7d8b50b2/html5/thumbnails/17.jpg)
7. 6で書いたコードの下に以下のコードを書きます。
Canvasでは この「コンテキスト」という存在を通じて色の変更、描画などの処理を行います。いわば コンテキストは「絵を描く人」のような存在です。上のコードでは、「cv」というキャンバスに絵を描いてもらうために 画家を用意するイメージです。
var ctx = cv.getContext(‘2d’);
![Page 18: HTML5 Canvasを学びたい人に送るCanvasの超基本とその後の学習方針](https://reader036.vdocuments.us/reader036/viewer/2022062405/55615272d8b42a8a7d8b50b2/html5/thumbnails/18.jpg)
8. 7で書いたコードの下に以下のコードを書きます。
絵を描く人に対して、「色を塗るときは#F00(赤色)でよろしくお願いします」とお願いしています。
ctx.fillStyle = ‘#F00’;
![Page 19: HTML5 Canvasを学びたい人に送るCanvasの超基本とその後の学習方針](https://reader036.vdocuments.us/reader036/viewer/2022062405/55615272d8b42a8a7d8b50b2/html5/thumbnails/19.jpg)
9. 8で書いたコードの下に以下のコードを書きます。
絵を描く人に対して「キャンバスの左上から10pxの所から、縦横100pxの範囲を四角に塗っちゃって下さい」とお願いしているイメージです。
ctx.fillRect(10, 10, 100, 100);
![Page 20: HTML5 Canvasを学びたい人に送るCanvasの超基本とその後の学習方針](https://reader036.vdocuments.us/reader036/viewer/2022062405/55615272d8b42a8a7d8b50b2/html5/thumbnails/20.jpg)
![Page 21: HTML5 Canvasを学びたい人に送るCanvasの超基本とその後の学習方針](https://reader036.vdocuments.us/reader036/viewer/2022062405/55615272d8b42a8a7d8b50b2/html5/thumbnails/21.jpg)
![Page 22: HTML5 Canvasを学びたい人に送るCanvasの超基本とその後の学習方針](https://reader036.vdocuments.us/reader036/viewer/2022062405/55615272d8b42a8a7d8b50b2/html5/thumbnails/22.jpg)
![Page 23: HTML5 Canvasを学びたい人に送るCanvasの超基本とその後の学習方針](https://reader036.vdocuments.us/reader036/viewer/2022062405/55615272d8b42a8a7d8b50b2/html5/thumbnails/23.jpg)
![Page 24: HTML5 Canvasを学びたい人に送るCanvasの超基本とその後の学習方針](https://reader036.vdocuments.us/reader036/viewer/2022062405/55615272d8b42a8a7d8b50b2/html5/thumbnails/24.jpg)
![Page 25: HTML5 Canvasを学びたい人に送るCanvasの超基本とその後の学習方針](https://reader036.vdocuments.us/reader036/viewer/2022062405/55615272d8b42a8a7d8b50b2/html5/thumbnails/25.jpg)
![Page 26: HTML5 Canvasを学びたい人に送るCanvasの超基本とその後の学習方針](https://reader036.vdocuments.us/reader036/viewer/2022062405/55615272d8b42a8a7d8b50b2/html5/thumbnails/26.jpg)
![Page 27: HTML5 Canvasを学びたい人に送るCanvasの超基本とその後の学習方針](https://reader036.vdocuments.us/reader036/viewer/2022062405/55615272d8b42a8a7d8b50b2/html5/thumbnails/27.jpg)
![Page 28: HTML5 Canvasを学びたい人に送るCanvasの超基本とその後の学習方針](https://reader036.vdocuments.us/reader036/viewer/2022062405/55615272d8b42a8a7d8b50b2/html5/thumbnails/28.jpg)
![Page 29: HTML5 Canvasを学びたい人に送るCanvasの超基本とその後の学習方針](https://reader036.vdocuments.us/reader036/viewer/2022062405/55615272d8b42a8a7d8b50b2/html5/thumbnails/29.jpg)
![Page 30: HTML5 Canvasを学びたい人に送るCanvasの超基本とその後の学習方針](https://reader036.vdocuments.us/reader036/viewer/2022062405/55615272d8b42a8a7d8b50b2/html5/thumbnails/30.jpg)
![Page 31: HTML5 Canvasを学びたい人に送るCanvasの超基本とその後の学習方針](https://reader036.vdocuments.us/reader036/viewer/2022062405/55615272d8b42a8a7d8b50b2/html5/thumbnails/31.jpg)
![Page 32: HTML5 Canvasを学びたい人に送るCanvasの超基本とその後の学習方針](https://reader036.vdocuments.us/reader036/viewer/2022062405/55615272d8b42a8a7d8b50b2/html5/thumbnails/32.jpg)
![Page 33: HTML5 Canvasを学びたい人に送るCanvasの超基本とその後の学習方針](https://reader036.vdocuments.us/reader036/viewer/2022062405/55615272d8b42a8a7d8b50b2/html5/thumbnails/33.jpg)
![Page 34: HTML5 Canvasを学びたい人に送るCanvasの超基本とその後の学習方針](https://reader036.vdocuments.us/reader036/viewer/2022062405/55615272d8b42a8a7d8b50b2/html5/thumbnails/34.jpg)
![Page 35: HTML5 Canvasを学びたい人に送るCanvasの超基本とその後の学習方針](https://reader036.vdocuments.us/reader036/viewer/2022062405/55615272d8b42a8a7d8b50b2/html5/thumbnails/35.jpg)
![Page 36: HTML5 Canvasを学びたい人に送るCanvasの超基本とその後の学習方針](https://reader036.vdocuments.us/reader036/viewer/2022062405/55615272d8b42a8a7d8b50b2/html5/thumbnails/36.jpg)
![Page 37: HTML5 Canvasを学びたい人に送るCanvasの超基本とその後の学習方針](https://reader036.vdocuments.us/reader036/viewer/2022062405/55615272d8b42a8a7d8b50b2/html5/thumbnails/37.jpg)
![Page 38: HTML5 Canvasを学びたい人に送るCanvasの超基本とその後の学習方針](https://reader036.vdocuments.us/reader036/viewer/2022062405/55615272d8b42a8a7d8b50b2/html5/thumbnails/38.jpg)
![Page 39: HTML5 Canvasを学びたい人に送るCanvasの超基本とその後の学習方針](https://reader036.vdocuments.us/reader036/viewer/2022062405/55615272d8b42a8a7d8b50b2/html5/thumbnails/39.jpg)
![Page 40: HTML5 Canvasを学びたい人に送るCanvasの超基本とその後の学習方針](https://reader036.vdocuments.us/reader036/viewer/2022062405/55615272d8b42a8a7d8b50b2/html5/thumbnails/40.jpg)
![Page 41: HTML5 Canvasを学びたい人に送るCanvasの超基本とその後の学習方針](https://reader036.vdocuments.us/reader036/viewer/2022062405/55615272d8b42a8a7d8b50b2/html5/thumbnails/41.jpg)
![Page 42: HTML5 Canvasを学びたい人に送るCanvasの超基本とその後の学習方針](https://reader036.vdocuments.us/reader036/viewer/2022062405/55615272d8b42a8a7d8b50b2/html5/thumbnails/42.jpg)
![Page 43: HTML5 Canvasを学びたい人に送るCanvasの超基本とその後の学習方針](https://reader036.vdocuments.us/reader036/viewer/2022062405/55615272d8b42a8a7d8b50b2/html5/thumbnails/43.jpg)
![Page 44: HTML5 Canvasを学びたい人に送るCanvasの超基本とその後の学習方針](https://reader036.vdocuments.us/reader036/viewer/2022062405/55615272d8b42a8a7d8b50b2/html5/thumbnails/44.jpg)
var snows = [];
for( var i = 0; i < 50; i++ ){
snows.push( new Snow() );
}
描画前に雪インスタンスを生成し、配列につっこんでおく。( 以下は 50 個の雪インスタンスを格納する例 )
![Page 45: HTML5 Canvasを学びたい人に送るCanvasの超基本とその後の学習方針](https://reader036.vdocuments.us/reader036/viewer/2022062405/55615272d8b42a8a7d8b50b2/html5/thumbnails/45.jpg)
setInterval(function(){
:
for( var i = 0; I < snows.length; i++ ) {
snows[i].draw();
}
:
}, 30)
setInterval 関数で描画。
![Page 46: HTML5 Canvasを学びたい人に送るCanvasの超基本とその後の学習方針](https://reader036.vdocuments.us/reader036/viewer/2022062405/55615272d8b42a8a7d8b50b2/html5/thumbnails/46.jpg)
ここら辺の勘所が学べる良い教材
![Page 47: HTML5 Canvasを学びたい人に送るCanvasの超基本とその後の学習方針](https://reader036.vdocuments.us/reader036/viewer/2022062405/55615272d8b42a8a7d8b50b2/html5/thumbnails/47.jpg)
CodePlayerhttp://thecodeplayer.com/
↓ここら辺の教材を何回か写経すると何となく勘所がつかめてくるhttp://thecodeplayer.com/walkthrough/make-a-
particle-system-in-html5-canvas
![Page 48: HTML5 Canvasを学びたい人に送るCanvasの超基本とその後の学習方針](https://reader036.vdocuments.us/reader036/viewer/2022062405/55615272d8b42a8a7d8b50b2/html5/thumbnails/48.jpg)
CODEPREPhttp://codeprep.jp/
「オブジェクト指向入門」オブジェクト指向を学びつつCanvasでパーティクルの勉強もできる。http://codeprep.jp/ja/books/book/36
![Page 49: HTML5 Canvasを学びたい人に送るCanvasの超基本とその後の学習方針](https://reader036.vdocuments.us/reader036/viewer/2022062405/55615272d8b42a8a7d8b50b2/html5/thumbnails/49.jpg)
ありがとうございました