CanvasRenderingContext2D.ellipse()
CanvasRenderingContext2D.ellipse()
はキャンバス 2D API のメソッドで、現在のサブパスに楕円の弧を追加します。
構文
js
void ctx.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
(時計回り) です。
例
完全な楕円の描画
この例は、 π/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();
// Draw the ellipse's line of reflection
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();
結果
仕様書
Specification |
---|
HTML Standard # dom-context-2d-ellipse-dev |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- このメソッドを定義しているインターフェイス:
CanvasRenderingContext2D
- 真円を描くには
CanvasRenderingContext2D.arc()
を使用してください。