CanvasRenderingContext2D：ellipse() 方法

基线 广泛可用

此功能已经成熟，可以在许多设备和浏览器版本中运行。它在所有浏览器中都可用，从 2015 年 7 月.

Canvas 2D API 的CanvasRenderingContext2D.ellipse()方法将一个椭圆弧添加到当前子路径中。

语法

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结束，并按照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");

// Draw the ellipse
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();

结果

各种椭圆弧

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

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

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅