CanvasRenderingContext2D: ellipse() メソッド
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2016年8月以降、すべてのブラウザーで利用可能です。
CanvasRenderingContext2D.ellipse() はキャンバス 2D API のメソッドで、現在のサブパスに楕円の弧を追加します。
構文
js
ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle)
ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise)
ellipse() メソッドは (x, y) を中心として、 radiusX と radiusY を半径とする楕円の弧を生成します。パスは startAngle から始まって endAngle で終わり、回転方向は anticlockwise で指定します（既定では時計回りです）。
引数
x-
楕円の中心の X 軸 (水平) 座標です。
y-
楕円の中心の Y 軸 (垂直) 座標です。
radiusX-
楕円の長辺の半径です。負の値であってはなりません。
radiusY-
楕円の短辺の半径です。負の値であってはなりません。
rotation-
楕円の傾きで、ラジアンで表現します。
startAngle-
楕円が始まる離心角で、正の X 軸から時計回りの角度をラジアンで表現したものです。
endAngle-
楕円が終わる離心角で、正の X 軸から時計回りの角度をラジアンで表現したものです。
counterclockwise省略可-
オプションの論理値で、
trueの場合は楕円を反時計回りに描きます。デフォルト値はfalse(時計回り) です。
返値
なし (undefined)。
例
完全な楕円の描画
この例は、 π/4 ラジアンの角度 (45°) で楕円を描きます。楕円全体を描くには、弧が 0 ラジアン (0°) で始まり、 2π ラジアン (360°) で終わるようにします。
HTML
html
<canvas id="canvas" width="200" height="200"></canvas>
JavaScript
js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
// 楕円を描画
ctx.beginPath();
ctx.ellipse(100, 100, 50, 75, Math.PI / 4, 0, 2 * Math.PI);
ctx.stroke();
// 楕円の反射線を描画
ctx.beginPath();
ctx.setLineDash([5, 5]);
ctx.moveTo(0, 200);
ctx.lineTo(200, 0);
ctx.stroke();
結果
様々な楕円の弧
この例では、様々な属性の 3 本の楕円のパスを生成します。
HTML
html
<canvas id="canvas"></canvas>
JavaScript
js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.beginPath();
ctx.ellipse(60, 75, 50, 30, Math.PI * 0.25, 0, Math.PI * 1.5);
ctx.fill();
ctx.fillStyle = "blue";
ctx.beginPath();
ctx.ellipse(150, 75, 50, 30, Math.PI * 0.25, 0, Math.PI);
ctx.fill();
ctx.fillStyle = "green";
ctx.beginPath();
ctx.ellipse(240, 75, 50, 30, Math.PI * 0.25, 0, Math.PI, true);
ctx.fill();
結果
仕様書
| 仕様書 |
|---|
| HTML # dom-context-2d-ellipse-dev |
ブラウザーの互換性
関連情報
- このメソッドを定義しているインターフェイス:
CanvasRenderingContext2D - 真円を描くには
CanvasRenderingContext2D.arc()を使用してください。