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 July 2015.

Canvas 2D API 的 CanvasRenderingContext2D.ellipse() 方法用于向当前子路径添加椭圆弧。

语法

js
ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle)
ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise)

参数

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();

结果

不同的椭圆弧

此示例创建了三条具有不同属性的椭圆路径。

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
# dom-context-2d-ellipse-dev

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
ellipse

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

参见