CanvasRenderingContext2D: ellipse() 方法
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，则逆时针（anticlockwise）绘制椭圆。默认值为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 |
浏览器兼容性
加载中…
另见
- 定义此方法的接口：
CanvasRenderingContext2D - 使用
CanvasRenderingContext2D.arc()绘制圆形弧