CanvasRenderingContext2D.ellipse()

CanvasRenderingContext2D.ellipse() は Canvas 2D API のメソッドで、現在のサブパスに楕円の弧を追加します。

構文

void ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle [, anticlockwise]);

ellipse() メソッドは (x, y) を中心として、 radiusXradiusY を半径とする楕円の弧を生成します。パスは startAngle から始まって endAngle で終わり、回転方向は anticlockwise で指定します (既定では時計回りです)。

引数

x
楕円の中心の X 軸 (水平) 座標です。
y
楕円の中心の Y 軸 (垂直) 座標です。
radiusX
楕円の長辺の半径です。負の値であってはなりません。
radiusY
楕円の短辺の半径です。負の値であってはなりません。
rotation
楕円の傾きで、ラジアンで表現します。
startAngle
楕円が始まる角度で、正の X 軸から時計回りの角度をラジアンで表現したものです。
endAngle
楕円が終わる角度で、正の X 軸から時計回りの角度をラジアンで表現したものです。
anticlockwise Optional
省略可能な Boolean の値で、 true の場合は楕円を反時計回りに描きます。既定値は false (時計回り) です。

完全な楕円の描画

この例は、 π/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();

// 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

<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 * .25, 0, Math.PI * 1.5);
ctx.fill();

ctx.fillStyle = 'blue';
ctx.beginPath();
ctx.ellipse(150, 75, 50, 30, Math.PI * .25, 0, Math.PI);
ctx.fill();

ctx.fillStyle = 'green';
ctx.beginPath();
ctx.ellipse(240, 75, 50, 30, Math.PI * .25, 0, Math.PI, true);
ctx.fill();

結果

仕様書

仕様書 状態 備考
HTML Living Standard
CanvasRenderingContext2D.ellipse の定義
現行の標準

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
ellipse
実験的
Chrome 完全対応 31Edge 完全対応 13Firefox 完全対応 48IE 未対応 なしOpera 完全対応 18Safari 完全対応 9WebView Android 完全対応 4.4.3Chrome Android 完全対応 31Firefox Android 完全対応 48Opera Android 完全対応 18Safari iOS 完全対応 9Samsung Internet Android 完全対応 2.0

凡例

完全対応  
完全対応
未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。

関連情報