Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
MPS Setagaya 第5回ミーティング
JavaScript でパックマン! 第2回
金子純也
Morning Project Samurai 代表
MPS Setagaya 第5回 (2015/09/13)ミーティング資料 (c) Ju...
今日の目標
JavaScript (JS) で
Canvas に pac-man を描く!
(Canvas への描画に慣れる!)
MPS Setagaya 第5回 (2015/09/13)ミーティング資料 (c) Junya Kaneko
HTML と DOM Tree
DOM Tree

(HTML全体)
JavaScript
Canvas

(HTML要素)
1. Context の要求
2. Context
Context 3. 線や絵の描画命令
0-1. Canvas の...
Canvas要素
DOM Tree

(HTML全体)
JavaScript
Canvas

(HTML要素)
1. Context の要求
2. Context
Context 3. 線や絵の描画命令
0-1. Canvas の要求
0-2....
Context
DOM Tree

(HTML全体)
JavaScript
Canvas

(HTML要素)
1. Context の要求
2. Context
Context 3. 線や絵の描画命令
0-1. Canvas の要求
0-2. ...
JSを用いたHTML要素との対話
DOM Tree

(HTML全体)
JavaScript
Canvas

(HTML要素)
1. Context の要求
2. Context
Context 3. 線や絵の描画命令
0-1. Canvas ...
Context オブジェクト
DOM Tree

(HTML全体)
JavaScript
Canvas

(HTML要素)
1. Context の要求
2. Context
Context 3. 線や絵の描画命令
0-1. Canvas の要...
Context のお絵描きツール達
• 四角形を描くツール

context.fillRect(left, top, width, height)
• 円を描くツール

context.arc(cx, cy, r, s_angle, e_angl...
前回書いたスクリプト
<body>
<canvas id=“pac-man" width="300" height="150">

canvas がサポートされてません。</canvas>
<script type="text/javascri...
前回書いたスクリプト
<body>
<canvas id=“pac-man" width="300" height="150">

canvas がサポートされてません。</canvas>
<script type="text/javascri...
前回書いたスクリプト
<body>
<canvas id=“pac-man" width="300" height="150">

canvas がサポートされてません。</canvas>
<script type="text/javascri...
前回書いたスクリプト
<body>
<canvas id=“pac-man" width="300" height="150">

canvas がサポートされてません。</canvas>
<script type="text/javascri...
前回書いたスクリプト
<body>
<canvas id=“pac-man" width="300" height="150">

canvas がサポートされてません。</canvas>
<script type="text/javascri...
実行結果
MPS Setagaya 第5回 (2015/09/13)ミーティング資料 (c) Junya Kaneko
前回のことも思い出しながら
パックマンを描いてみよう !
MPS Setagaya 第5回 (2015/09/13)ミーティング資料 (c) Junya Kaneko
まずは円を描いてみよう !
<body>
<canvas id=“pac-man" width="200" height=“300”>
canvs がサポートされていません。
</canvas>
<script>
var cv = docume...
実行結果
赤丸が描かれない人は、
ブラウザのデバッグツールを使ってみよう !
(前回のスライド参照)
MPS Setagaya 第5回 (2015/09/13)ミーティング資料 (c) Junya Kaneko
まずは円を描いてみよう !
<body>
<canvas id=“pac-man" width="200" height=“300”>
canvs がサポートされていません。
</canvas>
<script>
var cv = docume...
まずは円を描いてみよう !
<body>
<canvas id=“pac-man" width="200" height=“300”>
canvs がサポートされていません。
</canvas>
<script>
var cv = docume...
まずは円を描いてみよう !
<body>
<canvas id=“pac-man" width="200" height=“300”>
canvs がサポートされていません。
</canvas>
<script>
var cv = docume...
まずは円を描いてみよう !
<body>
<canvas id=“pac-man" width="200" height=“300”>
canvs がサポートされていません。
</canvas>
<script>
var cv = docume...
arc() 詳細
arc(中心x, 中心y, 半径, 開始角度, 終了角度, 反時計回り)
* 開始角度、終了角度はラジアンで指定

(360度 = 2 * Math.PI ラジアン)
ctx.arc(100, 100, 50, 0, 1/2 ...
ここまでのまとめ
<script>
var cv = document.getElementById(‘pac-man');
var ctx = cv.getContext(“2d”);
ctx.strokeStyle="#FF0000";
c...
Q. パックマンに口を書いてみよう!
MPS Setagaya 第5回 (2015/09/13)ミーティング資料 (c) Junya Kaneko
Q. パックマンに口を書いてみよう!
• ヒント1

白い扇形を赤い丸に重ねてやればいい!!
• ヒント2

扇形はどうやって作ればいい??
+
MPS Setagaya 第5回 (2015/09/13)ミーティング資料 (c) Junya K...
A. パックマンに口を書いてみよう!
var cv = document.getElementById('pacman');
var ctx = cv.getContext("2d");
ctx.strokeStyle="#FF0000";
c...
A. パックマンに口を書いてみよう!
var cv = document.getElementById('pacman');
var ctx = cv.getContext("2d");
ctx.strokeStyle="#FF0000";
c...
A. パックマンに口を書いてみよう!
var cv = document.getElementById('pacman');
var ctx = cv.getContext("2d");
ctx.strokeStyle="#FF0000";
c...
A. パックマンに口を書いてみよう!
var cv = document.getElementById('pacman');
var ctx = cv.getContext("2d");
ctx.strokeStyle="#FF0000";
c...
A. パックマンに口を書いてみよう!
var cv = document.getElementById('pacman');
var ctx = cv.getContext("2d");
ctx.strokeStyle="#FF0000";
c...
A. パックマンに口を書いてみよう!
var cv = document.getElementById('pacman');
var ctx = cv.getContext("2d");
ctx.strokeStyle="#FF0000";
c...
A. パックマンに口を書いてみよう!
var cv = document.getElementById('pacman');
var ctx = cv.getContext("2d");
ctx.strokeStyle="#FF0000";
c...
A. パックマンに口を書いてみよう!
var cv = document.getElementById('pacman');
var ctx = cv.getContext("2d");
ctx.strokeStyle="#FF0000";
c...
A. パックマンに口を書いてみよう!
var cv = document.getElementById('pacman');
var ctx = cv.getContext("2d");
ctx.strokeStyle="#FF0000";
c...
A. パックマンに口を書いてみよう!
var cv = document.getElementById('pacman');
var ctx = cv.getContext("2d");
ctx.strokeStyle="#FF0000";
c...
A. パックマンに口を書いてみよう!
var cv = document.getElementById('pacman');
var ctx = cv.getContext("2d");
ctx.strokeStyle="#FF0000";
c...
次回
動くpac-man !!!
MPS Setagaya 第5回 (2015/09/13)ミーティング資料 (c) Junya Kaneko
Upcoming SlideShare
Loading in …5
×

JavaScript でパックマン! 第2回

610 views

Published on

JavaScript と HTML5 で新たに導入された Canvas を用いてパックマンを作ります。MPS Setagaya 第5回(2015/09/13) ミーティング資料です。

Published in: Software
  • Be the first to comment

  • Be the first to like this

JavaScript でパックマン! 第2回

  1. 1. MPS Setagaya 第5回ミーティング JavaScript でパックマン! 第2回 金子純也 Morning Project Samurai 代表 MPS Setagaya 第5回 (2015/09/13)ミーティング資料 (c) Junya Kaneko
  2. 2. 今日の目標 JavaScript (JS) で Canvas に pac-man を描く! (Canvas への描画に慣れる!) MPS Setagaya 第5回 (2015/09/13)ミーティング資料 (c) Junya Kaneko
  3. 3. HTML と DOM Tree DOM Tree
 (HTML全体) JavaScript Canvas
 (HTML要素) 1. Context の要求 2. Context Context 3. 線や絵の描画命令 0-1. Canvas の要求 0-2. Canvas HTML要素の全てとそれを操作するための道具箱 MPS Setagaya 第5回 (2015/09/13)ミーティング資料 (c) Junya Kaneko
  4. 4. Canvas要素 DOM Tree
 (HTML全体) JavaScript Canvas
 (HTML要素) 1. Context の要求 2. Context Context 3. 線や絵の描画命令 0-1. Canvas の要求 0-2. Canvas 絵を描画して表示するための額縁と紙と筆記用具のセット MPS Setagaya 第5回 (2015/09/13)ミーティング資料 (c) Junya Kaneko
  5. 5. Context DOM Tree
 (HTML全体) JavaScript Canvas
 (HTML要素) 1. Context の要求 2. Context Context 3. 線や絵の描画命令 0-1. Canvas の要求 0-2. Canvas 絵を描画して表示するための紙と筆記用具のセット MPS Setagaya 第5回 (2015/09/13)ミーティング資料 (c) Junya Kaneko
  6. 6. JSを用いたHTML要素との対話 DOM Tree
 (HTML全体) JavaScript Canvas
 (HTML要素) 1. Context の要求 2. Context Context 3. 線や絵の描画命令 0-1. Canvas の要求 0-2. Canvas JavaScript で必要なものを1つ1つ順番に取り出してゆく MPS Setagaya 第5回 (2015/09/13)ミーティング資料 (c) Junya Kaneko
  7. 7. Context オブジェクト DOM Tree
 (HTML全体) JavaScript Canvas
 (HTML要素) 1. Context の要求 2. Context Context 3. 線や絵の描画命令 0-1. Canvas の要求 0-2. Canvas 最終的に紙と筆記用具を手に入れたら描画を行う MPS Setagaya 第5回 (2015/09/13)ミーティング資料 (c) Junya Kaneko
  8. 8. Context のお絵描きツール達 • 四角形を描くツール
 context.fillRect(left, top, width, height) • 円を描くツール
 context.arc(cx, cy, r, s_angle, e_angle, c_clockwise) • 図形の枠線の色を指定するツール
 context.strokeStyle = “rgb(255, 0, 0)”
 context.strokeStyle = “#FF0000” • 図形の塗りつぶし色を指定するツール
 context.fillStyle = “rgb(255, 0, 0)”
 context.fillStyle = “#FF0000” MPS Setagaya 第5回 (2015/09/13)ミーティング資料 (c) Junya Kaneko
  9. 9. 前回書いたスクリプト <body> <canvas id=“pac-man" width="300" height="150">
 canvas がサポートされてません。</canvas> <script type="text/javascript"> var cv = document.getElementById(“pac-man”); var ctx = cv.getContext(“2d"); ctx.fillStyle="#FF0000"; ctx.fillRect(20, 20, 150, 100); </script> </body> MPS Setagaya 第5回 (2015/09/13)ミーティング資料 (c) Junya Kaneko
  10. 10. 前回書いたスクリプト <body> <canvas id=“pac-man" width="300" height="150">
 canvas がサポートされてません。</canvas> <script type="text/javascript"> var cv = document.getElementById(“pac-man”); var ctx = cv.getContext(“2d"); ctx.fillStyle="#FF0000"; ctx.fillRect(20, 20, 150, 100); </script> </body> キャンバスの準備 MPS Setagaya 第5回 (2015/09/13)ミーティング資料 (c) Junya Kaneko
  11. 11. 前回書いたスクリプト <body> <canvas id=“pac-man" width="300" height="150">
 canvas がサポートされてません。</canvas> <script type="text/javascript"> var cv = document.getElementById(“pac-man”); var ctx = cv.getContext(“2d"); ctx.fillStyle="#FF0000"; ctx.fillRect(20, 20, 150, 100); </script> </body> JS を用いたHTML要素と context との対話MPS Setagaya 第5回 (2015/09/13)ミーティング資料 (c) Junya Kaneko
  12. 12. 前回書いたスクリプト <body> <canvas id=“pac-man" width="300" height="150">
 canvas がサポートされてません。</canvas> <script type="text/javascript"> var cv = document.getElementById(“pac-man”); var ctx = cv.getContext(“2d"); ctx.fillStyle="#FF0000"; ctx.fillRect(20, 20, 150, 100); </script> </body> キャンバスとContext の取り出し MPS Setagaya 第5回 (2015/09/13)ミーティング資料 (c) Junya Kaneko
  13. 13. 前回書いたスクリプト <body> <canvas id=“pac-man" width="300" height="150">
 canvas がサポートされてません。</canvas> <script type="text/javascript"> var cv = document.getElementById(“pac-man”); var ctx = cv.getContext(“2d"); ctx.fillStyle="#FF0000"; ctx.fillRect(20, 20, 150, 100); </script> </body> 塗りつぶしの色の設定と、四角形の描画 MPS Setagaya 第5回 (2015/09/13)ミーティング資料 (c) Junya Kaneko
  14. 14. 実行結果 MPS Setagaya 第5回 (2015/09/13)ミーティング資料 (c) Junya Kaneko
  15. 15. 前回のことも思い出しながら パックマンを描いてみよう ! MPS Setagaya 第5回 (2015/09/13)ミーティング資料 (c) Junya Kaneko
  16. 16. まずは円を描いてみよう ! <body> <canvas id=“pac-man" width="200" height=“300”> canvs がサポートされていません。 </canvas> <script> var cv = document.getElementById(‘pac-man'); var ctx = cv.getContext(“2d"); ctx.strokeStyle="#FF0000"; ctx.fillStyle="#FF0000"; ctx.beginPath(); ctx.arc(100, 100, 50, 0, 2 * Math.PI); ctx.fill(); </script> </body> MPS Setagaya 第5回 (2015/09/13)ミーティング資料 (c) Junya Kaneko
  17. 17. 実行結果 赤丸が描かれない人は、 ブラウザのデバッグツールを使ってみよう ! (前回のスライド参照) MPS Setagaya 第5回 (2015/09/13)ミーティング資料 (c) Junya Kaneko
  18. 18. まずは円を描いてみよう ! <body> <canvas id=“pac-man" width="200" height=“300”> canvs がサポートされていません。 </canvas> <script> var cv = document.getElementById(‘pac-man'); var ctx = cv.getContext(“2d"); ctx.strokeStyle="#FF0000"; ctx.fillStyle="#FF0000"; ctx.beginPath(); ctx.arc(100, 100, 50, 0, 2 * Math.PI); ctx.fill(); </script> </body> 図形の描画スタイルの設定 MPS Setagaya 第5回 (2015/09/13)ミーティング資料 (c) Junya Kaneko
  19. 19. まずは円を描いてみよう ! <body> <canvas id=“pac-man" width="200" height=“300”> canvs がサポートされていません。 </canvas> <script> var cv = document.getElementById(‘pac-man'); var ctx = cv.getContext(“2d"); ctx.strokeStyle="#FF0000"; ctx.fillStyle="#FF0000"; ctx.beginPath(); ctx.arc(100, 100, 50, 0, 2 * Math.PI); ctx.fill(); </script> </body> これから上で設定したスタイルのもとで 描画する図形の設定開始MPS Setagaya 第5回 (2015/09/13)ミーティング資料 (c) Junya Kaneko
  20. 20. まずは円を描いてみよう ! <body> <canvas id=“pac-man" width="200" height=“300”> canvs がサポートされていません。 </canvas> <script> var cv = document.getElementById(‘pac-man'); var ctx = cv.getContext(“2d"); ctx.strokeStyle="#FF0000"; ctx.fillStyle="#FF0000"; ctx.beginPath(); ctx.arc(100, 100, 50, 0, 2 * Math.PI); ctx.fill(); </script> </body> 描画する円の形を決定
 (中心(100, 100)で半径50の円)MPS Setagaya 第5回 (2015/09/13)ミーティング資料 (c) Junya Kaneko
  21. 21. まずは円を描いてみよう ! <body> <canvas id=“pac-man" width="200" height=“300”> canvs がサポートされていません。 </canvas> <script> var cv = document.getElementById(‘pac-man'); var ctx = cv.getContext(“2d"); ctx.strokeStyle="#FF0000"; ctx.fillStyle="#FF0000"; ctx.beginPath(); ctx.arc(100, 100, 50, 0, 2 * Math.PI); ctx.fill(); </script> </body> 円を塗りつぶしで実際に描画 MPS Setagaya 第5回 (2015/09/13)ミーティング資料 (c) Junya Kaneko
  22. 22. arc() 詳細 arc(中心x, 中心y, 半径, 開始角度, 終了角度, 反時計回り) * 開始角度、終了角度はラジアンで指定
 (360度 = 2 * Math.PI ラジアン) ctx.arc(100, 100, 50, 0, 1/2 * Math.PI, true); ctx.arc(100, 100, 50, 0, 1/2 * Math.PI, false); MPS Setagaya 第5回 (2015/09/13)ミーティング資料 (c) Junya Kaneko
  23. 23. ここまでのまとめ <script> var cv = document.getElementById(‘pac-man'); var ctx = cv.getContext(“2d”); ctx.strokeStyle="#FF0000"; ctx.fillStyle="#FF0000"; ctx.beginPath(); ctx.arc(100, 100, 50, 0, 2 * Math.PI); ctx.fill(); </script> </body> スタイルの 設定 スタイルの 適用開始 描画する 図形の設定 実際に図形 を描画 MPS Setagaya 第5回 (2015/09/13)ミーティング資料 (c) Junya Kaneko
  24. 24. Q. パックマンに口を書いてみよう! MPS Setagaya 第5回 (2015/09/13)ミーティング資料 (c) Junya Kaneko
  25. 25. Q. パックマンに口を書いてみよう! • ヒント1
 白い扇形を赤い丸に重ねてやればいい!! • ヒント2
 扇形はどうやって作ればいい?? + MPS Setagaya 第5回 (2015/09/13)ミーティング資料 (c) Junya Kaneko
  26. 26. A. パックマンに口を書いてみよう! var cv = document.getElementById('pacman'); var ctx = cv.getContext("2d"); ctx.strokeStyle="#FF0000"; ctx.fillStyle="#FF0000"; ctx.beginPath(); ctx.arc(100, 100, 50, 0, 2 * Math.PI); ctx.fill(); ctx.strokeStyle="#FFFFFF"; ctx.fillStyle="#FFFFFF"; ctx.lineWidth=3; ctx.beginPath(); ctx.arc(100, 100, 50, -30 * Math.PI/180, 30 * Math.PI/180) ctx.moveTo(100, 100); ctx.lineTo(100 + 50 * Math.cos(-30 * Math.PI/180), 100 + 50 * Math.sin(-30 * Math.PI/180)); ctx.lineTo(100 + 50 * Math.cos(30 * Math.PI/180), 100 + 50 * Math.sin(30 * Math.PI/180)); ctx.stroke(); ctx.fill(); MPS Setagaya 第5回 (2015/09/13)ミーティング資料 (c) Junya Kaneko
  27. 27. A. パックマンに口を書いてみよう! var cv = document.getElementById('pacman'); var ctx = cv.getContext("2d"); ctx.strokeStyle="#FF0000"; ctx.fillStyle="#FF0000"; ctx.beginPath(); ctx.arc(100, 100, 50, 0, 2 * Math.PI); ctx.fill(); ctx.strokeStyle="#FFFFFF"; ctx.fillStyle="#FFFFFF"; ctx.lineWidth=3; ctx.beginPath(); ctx.arc(100, 100, 50, -30 * Math.PI/180, 30 * Math.PI/180) ctx.moveTo(100, 100); ctx.lineTo(100 + 50 * Math.cos(-30 * Math.PI/180), 100 + 50 * Math.sin(-30 * Math.PI/180)); ctx.lineTo(100 + 50 * Math.cos(30 * Math.PI/180), 100 + 50 * Math.sin(30 * Math.PI/180)); ctx.stroke(); ctx.fill(); 赤い円を描画 MPS Setagaya 第5回 (2015/09/13)ミーティング資料 (c) Junya Kaneko
  28. 28. A. パックマンに口を書いてみよう! var cv = document.getElementById('pacman'); var ctx = cv.getContext("2d"); ctx.strokeStyle="#FF0000"; ctx.fillStyle="#FF0000"; ctx.beginPath(); ctx.arc(100, 100, 50, 0, 2 * Math.PI); ctx.fill(); ctx.strokeStyle="#FFFFFF"; ctx.fillStyle="#FFFFFF"; ctx.lineWidth=3; ctx.beginPath(); ctx.arc(100, 100, 50, -30 * Math.PI/180, 30 * Math.PI/180) ctx.moveTo(100, 100); ctx.lineTo(100 + 50 * Math.cos(-30 * Math.PI/180), 100 + 50 * Math.sin(-30 * Math.PI/180)); ctx.lineTo(100 + 50 * Math.cos(30 * Math.PI/180), 100 + 50 * Math.sin(30 * Math.PI/180)); ctx.stroke(); ctx.fill(); ここから下で描く 図形は白色 MPS Setagaya 第5回 (2015/09/13)ミーティング資料 (c) Junya Kaneko
  29. 29. A. パックマンに口を書いてみよう! var cv = document.getElementById('pacman'); var ctx = cv.getContext("2d"); ctx.strokeStyle="#FF0000"; ctx.fillStyle="#FF0000"; ctx.beginPath(); ctx.arc(100, 100, 50, 0, 2 * Math.PI); ctx.fill(); ctx.strokeStyle="#FFFFFF"; ctx.fillStyle="#FFFFFF"; ctx.lineWidth=3; ctx.beginPath(); ctx.arc(100, 100, 50, -30 * Math.PI/180, 30 * Math.PI/180) ctx.moveTo(100, 100); ctx.lineTo(100 + 50 * Math.cos(-30 * Math.PI/180), 100 + 50 * Math.sin(-30 * Math.PI/180)); ctx.lineTo(100 + 50 * Math.cos(30 * Math.PI/180), 100 + 50 * Math.sin(30 * Math.PI/180)); ctx.stroke(); ctx.fill(); ここから下で描く 図形は白色で ラインの太さは3 MPS Setagaya 第5回 (2015/09/13)ミーティング資料 (c) Junya Kaneko
  30. 30. A. パックマンに口を書いてみよう! var cv = document.getElementById('pacman'); var ctx = cv.getContext("2d"); ctx.strokeStyle="#FF0000"; ctx.fillStyle="#FF0000"; ctx.beginPath(); ctx.arc(100, 100, 50, 0, 2 * Math.PI); ctx.fill(); ctx.strokeStyle="#FFFFFF"; ctx.fillStyle="#FFFFFF"; ctx.lineWidth=3; ctx.beginPath(); ctx.arc(100, 100, 50, -30 * Math.PI/180, 30 * Math.PI/180) ctx.moveTo(100, 100); ctx.lineTo(100 + 50 * Math.cos(-30 * Math.PI/180), 100 + 50 * Math.sin(-30 * Math.PI/180)); ctx.lineTo(100 + 50 * Math.cos(30 * Math.PI/180), 100 + 50 * Math.sin(30 * Math.PI/180)); ctx.stroke(); ctx.fill(); 上記のスタイル設定のもと 描画したい図形を設定開始 MPS Setagaya 第5回 (2015/09/13)ミーティング資料 (c) Junya Kaneko
  31. 31. A. パックマンに口を書いてみよう! var cv = document.getElementById('pacman'); var ctx = cv.getContext("2d"); ctx.strokeStyle="#FF0000"; ctx.fillStyle="#FF0000"; ctx.beginPath(); ctx.arc(100, 100, 50, 0, 2 * Math.PI); ctx.fill(); ctx.strokeStyle="#FFFFFF"; ctx.fillStyle="#FFFFFF"; ctx.lineWidth=3; ctx.beginPath(); ctx.arc(100, 100, 50, -30 * Math.PI/180, 30 * Math.PI/180) ctx.moveTo(100, 100); ctx.lineTo(100 + 50 * Math.cos(-30 * Math.PI/180), 100 + 50 * Math.sin(-30 * Math.PI/180)); ctx.lineTo(100 + 50 * Math.cos(30 * Math.PI/180), 100 + 50 * Math.sin(30 * Math.PI/180)); ctx.stroke(); ctx.fill(); 中心角が -30 から 30 の円 MPS Setagaya 第5回 (2015/09/13)ミーティング資料 (c) Junya Kaneko
  32. 32. A. パックマンに口を書いてみよう! var cv = document.getElementById('pacman'); var ctx = cv.getContext("2d"); ctx.strokeStyle="#FF0000"; ctx.fillStyle="#FF0000"; ctx.beginPath(); ctx.arc(100, 100, 50, 0, 2 * Math.PI); ctx.fill(); ctx.strokeStyle="#FFFFFF"; ctx.fillStyle="#FFFFFF"; ctx.lineWidth=3; ctx.beginPath(); ctx.arc(100, 100, 50, -30 * Math.PI/180, 30 * Math.PI/180) ctx.moveTo(100, 100); ctx.lineTo(100 + 50 * Math.cos(-30 * Math.PI/180), 100 + 50 * Math.sin(-30 * Math.PI/180)); ctx.lineTo(100 + 50 * Math.cos(30 * Math.PI/180), 100 + 50 * Math.sin(30 * Math.PI/180)); ctx.stroke(); ctx.fill(); 描画の開始点を(100, 100) に移動 MPS Setagaya 第5回 (2015/09/13)ミーティング資料 (c) Junya Kaneko
  33. 33. A. パックマンに口を書いてみよう! var cv = document.getElementById('pacman'); var ctx = cv.getContext("2d"); ctx.strokeStyle="#FF0000"; ctx.fillStyle="#FF0000"; ctx.beginPath(); ctx.arc(100, 100, 50, 0, 2 * Math.PI); ctx.fill(); ctx.strokeStyle="#FFFFFF"; ctx.fillStyle="#FFFFFF"; ctx.lineWidth=3; ctx.beginPath(); ctx.arc(100, 100, 50, -30 * Math.PI/180, 30 * Math.PI/180) ctx.moveTo(100, 100); ctx.lineTo(100 + 50 * Math.cos(-30 * Math.PI/180), 100 + 50 * Math.sin(-30 * Math.PI/180)); ctx.lineTo(100 + 50 * Math.cos(30 * Math.PI/180), 100 + 50 * Math.sin(30 * Math.PI/180)); ctx.stroke(); ctx.fill(); (100, 100)から指定した座標 まで直線を設定 (白板参照) MPS Setagaya 第5回 (2015/09/13)ミーティング資料 (c) Junya Kaneko
  34. 34. A. パックマンに口を書いてみよう! var cv = document.getElementById('pacman'); var ctx = cv.getContext("2d"); ctx.strokeStyle="#FF0000"; ctx.fillStyle="#FF0000"; ctx.beginPath(); ctx.arc(100, 100, 50, 0, 2 * Math.PI); ctx.fill(); ctx.strokeStyle="#FFFFFF"; ctx.fillStyle="#FFFFFF"; ctx.lineWidth=3; ctx.beginPath(); ctx.arc(100, 100, 50, -30 * Math.PI/180, 30 * Math.PI/180) ctx.moveTo(100, 100); ctx.lineTo(100 + 50 * Math.cos(-30 * Math.PI/180), 100 + 50 * Math.sin(-30 * Math.PI/180)); ctx.lineTo(100 + 50 * Math.cos(30 * Math.PI/180), 100 + 50 * Math.sin(30 * Math.PI/180)); ctx.stroke(); ctx.fill(); 一つ前の直線の終点から 指定した座標まで直線を設定 (白板参照) MPS Setagaya 第5回 (2015/09/13)ミーティング資料 (c) Junya Kaneko
  35. 35. A. パックマンに口を書いてみよう! var cv = document.getElementById('pacman'); var ctx = cv.getContext("2d"); ctx.strokeStyle="#FF0000"; ctx.fillStyle="#FF0000"; ctx.beginPath(); ctx.arc(100, 100, 50, 0, 2 * Math.PI); ctx.fill(); ctx.strokeStyle="#FFFFFF"; ctx.fillStyle="#FFFFFF"; ctx.lineWidth=3; ctx.beginPath(); ctx.arc(100, 100, 50, -30 * Math.PI/180, 30 * Math.PI/180) ctx.moveTo(100, 100); ctx.lineTo(100 + 50 * Math.cos(-30 * Math.PI/180), 100 + 50 * Math.sin(-30 * Math.PI/180)); ctx.lineTo(100 + 50 * Math.cos(30 * Math.PI/180), 100 + 50 * Math.sin(30 * Math.PI/180)); ctx.stroke(); ctx.fill(); 今まで設定してきた図形の 枠線を描画 MPS Setagaya 第5回 (2015/09/13)ミーティング資料 (c) Junya Kaneko
  36. 36. A. パックマンに口を書いてみよう! var cv = document.getElementById('pacman'); var ctx = cv.getContext("2d"); ctx.strokeStyle="#FF0000"; ctx.fillStyle="#FF0000"; ctx.beginPath(); ctx.arc(100, 100, 50, 0, 2 * Math.PI); ctx.fill(); ctx.strokeStyle="#FFFFFF"; ctx.fillStyle="#FFFFFF"; ctx.lineWidth=3; ctx.beginPath(); ctx.arc(100, 100, 50, -30 * Math.PI/180, 30 * Math.PI/180) ctx.moveTo(100, 100); ctx.lineTo(100 + 50 * Math.cos(-30 * Math.PI/180), 100 + 50 * Math.sin(-30 * Math.PI/180)); ctx.lineTo(100 + 50 * Math.cos(30 * Math.PI/180), 100 + 50 * Math.sin(30 * Math.PI/180)); ctx.stroke(); ctx.fill(); 今まで設定してきた図形を 塗りつぶして描画 MPS Setagaya 第5回 (2015/09/13)ミーティング資料 (c) Junya Kaneko
  37. 37. 次回 動くpac-man !!! MPS Setagaya 第5回 (2015/09/13)ミーティング資料 (c) Junya Kaneko

×