HTML5 Canvasで楕円を描く
この投稿ではHTML5 CanvasとJavaScriptを用いてHTMLドキュメントに楕円を描くスクリプティング方法について記す。
楕円形を描く
HTML5 Canvasの2Dを使って楕円を描くにはellipse()というメソッドを用いることができる。このメソッドの引数は次の順番に指定する。最後のオプションは反時計回りに描きたい場合にだけ指定するもの。
ellipse(1,2,3,4,5,6,7,8);- 楕円の中心の水平座標を指定。
- 楕円の中心の垂直座標を指定。
- 楕円の長軸半径を非負の値で指定。
- 楕円の短軸半径を非負の値で指定。
- 楕円の長軸の傾きを弧度法で指定。
- パスの始点を弧度法で指定。
- パスの終点を弧度法で指定。
- 【オプション】楕円を描くパスの方向を反時計回りにしたい場合にtrueと指定。
ただしHTML5 Canvasの2Dのellipse()メソッドは古いウェブブラウザでは対応していない場合があるので要注意。
楕円を描くためのHTMLとJavaScriptのソースコードは次のとおり。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>楕円を描く</title>
</head>
<Canvas id="myEllipse" width="200" height="200">
HTML5 CanvasかJavaScriptに未対応か無効になっています。
</Canvas>
<script>
// 角度をラジアンに変換する函数
function toRadian(degrees){
return Math.PI / 180 * degrees;
}
// HTML5 Canvasを利用する手続き
const Canvas = document.getElementById("myEllipse")
const Ctx = Canvas.getContext("2d");
// 楕円を描く
Ctx.beginPath(); // パスの初期化
// 楕円メソッド(中心x,中心y,長軸半径,短軸半径,傾き,始点,終点)
Ctx.ellipse(100,60,80,50,toRadian(15),0,toRadian(360));
Ctx.lineWidth = 2; // 線の太さ
Ctx.strokeStyle = 'blue'; // 枠の色
Ctx.stroke(); // 線を描く
Ctx.fillStyle = 'skyblue'; // 塗りつぶす色
Ctx.fill(); // 塗りつぶす
</script>
</body>
</html>上の楕円は楕円の長軸を右下に15度傾けたのでellipse()の第5引数に15と指定した。ただしellipse()の引数には角度を弧度法による単位ラジアンで指定する必要があるため、この15度を弧度法での値に直す必要があった。
toRadian()という函数は度数法の値を弧度法の値に変換するためのもの。度数法から弧度法への変換公式は次のとおり。
\[ ラジアン = \dfrac{\pi}{180} \times 角度 \]
線の色はstrokeStyleというプロパティに=演算子を用いてカラーコードを代入することで指定することができる。塗りつぶす色はfillStyleというプロパティに代入して指定することができる。
次の楕円は傾きを0度にしたもの。枠の色は赤、塗りつぶす色は桃色にしてみた。
// 楕円を描く
Ctx.beginPath(); // パスの初期化
// 楕円メソッド(中心x,中心y,長軸半径,短軸半径,傾き,始点,終点)
Ctx.ellipse(100,100,80,50,toRadian(0),0,toRadian(360));
Ctx.lineWidth = 2; // 線の太さ
Ctx.strokeStyle = 'red'; // 枠の色
Ctx.stroke(); // 線を描く
Ctx.fillStyle = 'pink'; // 塗りつぶす色
Ctx.fill(); // 塗りつぶすellipse()の引数の値をいろいろ変えてみて楕円の描画がどのように変化するか試してみると引数がどのように機能するかを掴むことができる。
次の楕円は長軸の半径をもう少し長くしてみた。傾きには負の値-15度を指定してみた。枠の色は緑、塗りつぶす色は黄色とした。
// 楕円を描く
Ctx.beginPath(); // パスの初期化
// 楕円メソッド(中心x,中心y,長軸半径,短軸半径,傾き,始点,終点)
Ctx.ellipse(100,60,100,50,toRadian(-15),0,toRadian(360));
Ctx.lineWidth = 2; // 線の太さ
Ctx.strokeStyle = 'green'; // 線の色
Ctx.stroke(); // 線を描く
Ctx.fillStyle = 'yellow'; // 塗りつぶす色
Ctx.fill(); // 塗りつぶす
コメント
コメントを投稿