![見出し画像](https://assets.st-note.com/production/uploads/images/127246077/rectangle_large_type_2_bb2b9dd6538acf183829e6772467321e.png?width=1200)
わかりやすいJavaScript!-6 もっと書こう
Canvasにはいろんな機能が盛り沢山です。上記サイトに詳しく説明がありますのでじっくりとやる場合は参考になります。
このサイトには大きくインスタンスプロパティ、インスタンスメソッドとして分けて書いてあります。
プロパティはいろんな要素、部品的なもの、例えば文字関連、色などのスタイル関係の指定する方法が書かれています。メソッドは例えば"円を描く"というような命令、一発で何かができる命令が書いてあります。これらを組み合わせていろんなことができるようになります。
この中からよく使うかなというものも何個かを取り上げてみたいと思います。最初に四角を書いたので、同じように図形の円、"まる"を書く方法、インスタンスメソッドを使います。
arc()
arc() メソッドは (x, y) を中心とし、 radius を半径とした円弧を作成します。角度は startAngle から endAngle まで、 counterclockwise で指定された向き(既定では時計回り)に描かれます。
まずCanvasを使う準備HTMLです。
<canvas id="canvas" width="150" height="150"></canvas>
JavaScriptです。
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
これで準備は完了。
円弧の X 座標は 100、 Y 座標は 75、半径は 50 です。円弧を一周させるには、 0 ラジアン(0°)の角度で始まり、 2π ラジアン(360°)の角度で終わります。
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.stroke();
fillRect()ではこれだけで四角が描画されますが、arc()では
beginPath()とstroke()が必要です。
1 beginPath()で描き始めを宣言
2 何らかの描画のための処理
3 stroke()
という流れになります。
次に円を描く命令です
arc(X 座標, Y 座標, 半径, 始まりの角度, 終わりの角度 [,論理値(省略可)])
arc(100, 75, 50, 0, 2 * Math.PI);
今回の円はX 座標は 100、 Y 座標は 75、半径は 50 です。円弧を一周させるには、 0 ラジアン(0°)の角度で始まり、 2π ラジアン(360°)の角度で終わります(論理値は省略)。
角度ですが、日常の生活では角度といえば360°というような度数法を使ってます。なのでラジアンで表す弧度法はあまり馴染みはありませんがプログラミングではよく使うことになります。
度数法と弧度法の関係は
度数法では円は360°です。これをラジアン(弧度法)では2πと表すことができます。以下のサイトでわかりやすく解説してあります。
JavaScriptで表すと
2 * Math.PI
となります。
この記事が気に入ったらサポートをしてみませんか?