CanvasRenderingContext2D: ellipse() メソッド
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2016年8月.
CanvasRenderingContext2D.ellipse() はキャンバス 2D API のメソッドで、現在のサブパスに楕円の弧を追加します。
構文
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
<canvas id="canvas" width="200" height="200"></canvas>
JavaScript
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
<canvas id="canvas"></canvas>
JavaScript
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();
結果
仕様書
| Specification |
|---|
| HTML # dom-context-2d-ellipse-dev |
ブラウザーの互換性
関連情報
- このメソッドを定義しているインターフェイス:
CanvasRenderingContext2D - 真円を描くには
CanvasRenderingContext2D.arc()を使用してください。