Office365 非アクティブ化の手順 - 東京都市大学...Office365_非アクティブ化の手順 大学院への進学などで学籍番号が変わった学生は以下の手順にしたがって、アクティブ
HTML5 Canvasを学びたい人に送るCanvasの超基本とその後の学習方針
49
-
Upload
nisei-kimura -
Category
Technology
-
view
1.534 -
download
0
description
「HTML5 Canvasをいじってみたいけど、なんか難しそうだし手を出しづらいんだよなあ」という人を対象とした HTML5 Canvas の超基本として 四角形の描画を紹介します。 また、応用として複雑なアニメーションをつくっていく上での勘所の紹介と、勘所を学ぶ上で役に立つ教材の紹介も行います。
Transcript of HTML5 Canvasを学びたい人に送るCanvasの超基本とその後の学習方針
<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
ありがとうございました
