円を書く
24行目から28行目のようにコードを記述しブラウザで表示してください。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>JavaScriptでゲーム</title> <style> * { padding: 0; margin: 0; } canvas {background: #000000; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);} </style> </head> <body> <canvas id="canvas" width="640" height="480"></canvas> <script> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.arc(320, 60, 50, 0, Math.PI*2, false); ctx.strokeStyle = "pink"; ctx.stroke(); ctx.closePath(); </script> </body> </html> |
円を書く命令が25行目の「arc()」です。
角度や方向がわかりづらいですね、まず角度の設定を確認していきます。
ラジアンは0度から360度を0~2πで表現します。どのように描画されるか次のコードで終了角度を変更しながら確認します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
ctx.beginPath(); ctx.strokeStyle = "pink"; ctx.arc(320, 50, 20,0,Math.PI*0.5, false); ctx.stroke(); ctx.closePath(); ctx.beginPath(); ctx.strokeStyle = "pink"; ctx.arc(320, 100, 20,0,Math.PI*1, false); ctx.stroke(); ctx.closePath(); ctx.beginPath(); ctx.strokeStyle = "pink"; ctx.arc(320, 150, 20,0,Math.PI*1.5, false); ctx.stroke(); ctx.closePath(); ctx.beginPath(); ctx.strokeStyle = "pink"; ctx.arc(320, 200, 20,0,Math.PI*2, false); ctx.stroke(); ctx.closePath(); |
次に方向を確認します。上記はfalse(時計回り)を指定していました。これをtrue(反時計回り)に変更します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
ctx.beginPath(); ctx.strokeStyle = "pink"; ctx.arc(320, 50, 20,0,Math.PI*0.5, true); ctx.stroke(); ctx.closePath(); ctx.beginPath(); ctx.strokeStyle = "pink"; ctx.arc(320, 100, 20,0,Math.PI*1, true); ctx.stroke(); ctx.closePath(); ctx.beginPath(); ctx.strokeStyle = "pink"; ctx.arc(320, 150, 20,0,Math.PI*1.5, true); ctx.stroke(); ctx.closePath(); ctx.beginPath(); ctx.strokeStyle = "pink"; ctx.arc(320, 200, 20,0,Math.PI*2, true); ctx.stroke(); ctx.closePath(); |
塗りつぶし
円の中を塗りつぶします。
24 25 26 27 28 |
ctx.beginPath(); ctx.arc(320, 60, 50, 0, Math.PI*2, false); ctx.fillStyle = "pink"; ctx.fill(); ctx.closePath(); |
四角形と同様に塗りつぶす色を「fillStyle()」、塗りつぶしの実行を「fill()」で行います。
線、四角形、円を書くことができました。次に文字を描画していきます。