JavaScript Canvas 椭圆教程
最后修改于 2025 年 4 月 3 日
在本文中，我们将探讨如何使用 JavaScript 在 HTML Canvas 上绘制椭圆。椭圆是多种图形应用程序中使用的通用形状。掌握椭圆绘制将大大扩展您的 Canvas 绘图能力。
基本定义
椭圆是一种规则的卵形，由其中心点、两个半径（x 和 y）以及旋转角度定义。在 Canvas 上，可以使用 ellipse() 方法或通过近似圆弧来绘制椭圆。
ellipse() 方法接受中心坐标、x 和 y 半径、旋转、开始和结束角度以及绘图方向等参数。这提供了对椭圆外观和位置的精确控制。
基本椭圆
此示例演示了如何在 Canvas 上绘制一个简单的填充椭圆。
<!DOCTYPE html>
<html>
<head>
<title>Basic Canvas Ellipse</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.ellipse(150, 100, 80, 50, 0, 0, Math.PI * 2);
ctx.fillStyle = 'blue';
ctx.fill();
</script>
</body>
</html>
此代码在 (150,100) 处创建一个蓝色的填充椭圆，x 半径为 80，y 半径为 50。旋转角度为 0（水平），我们绘制一个完整的椭圆（0 到 2π 弧度）。
ellipse() 方法在路径上下文中调用。定义路径后，我们设置填充样式并调用 fill() 进行渲染。
描边椭圆
此示例展示了如何绘制具有自定义描边属性的椭圆轮廓。
<!DOCTYPE html>
<html>
<head>
<title>Stroked Ellipse</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.ellipse(150, 100, 100, 60, 0, 0, Math.PI * 2);
ctx.strokeStyle = 'red';
ctx.lineWidth = 5;
ctx.stroke();
</script>
</body>
</html>
在这里，我们创建了一个椭圆轮廓而不是填充形状。描边颜色为红色，线宽为 5px。椭圆中心为，x 半径为 100，y 半径为 60。
请注意，我们使用 stroke() 而不是 fill() 来仅绘制轮廓。这演示了 Canvas 上填充形状和描边形状之间的区别。
部分椭圆（圆弧）
此示例通过指定开始和结束角度来演示绘制部分椭圆。
<!DOCTYPE html>
<html>
<head>
<title>Partial Ellipse</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.ellipse(150, 100, 90, 50, 0, Math.PI/4, Math.PI * 1.5);
ctx.strokeStyle = 'green';
ctx.lineWidth = 3;
ctx.stroke();
</script>
</body>
</html>
此代码绘制一个部分椭圆弧，从 π/4 弧度 (45°) 开始，到 1.5π 弧度 (270°) 结束。结果是一个绿边四分之三椭圆。
Canvas 中的角度以弧度为单位测量，0 指向右侧。正角度顺时针旋转。此示例演示了如何创建任意部分的椭圆弧。
旋转椭圆
此示例展示了如何绘制一个由指定角度旋转的椭圆。
<!DOCTYPE html>
<html>
<head>
<title>Rotated Ellipse</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.ellipse(150, 100, 80, 40, Math.PI/4, 0, Math.PI * 2);
ctx.fillStyle = 'purple';
ctx.fill();
</script>
</body>
</html>
在这里，我们将椭圆旋转 π/4 弧度 (45°)。旋转参数是 ellipse() 方法的第五个参数。椭圆保持其 x 和 y 半径，但被倾斜了。
旋转围绕中心点发生。此示例演示了如何创建非轴对齐的椭圆以实现更复杂的设计。
带渐变填充的椭圆
这个高级示例将径向渐变填充应用于椭圆。
<!DOCTYPE html>
<html>
<head>
<title>Gradient Ellipse</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const gradient = ctx.createRadialGradient(150, 100, 0, 150, 100, 80);
gradient.addColorStop(0, 'white');
gradient.addColorStop(1, 'orange');
ctx.beginPath();
ctx.ellipse(150, 100, 100, 60, 0, 0, Math.PI * 2);
ctx.fillStyle = gradient;
ctx.fill();
</script>
</body>
</html>
这创建了一个径向渐变，从中心白色开始，到边缘橙色过渡。渐变与椭圆的尺寸完美对齐。
createRadialGradient 方法定义了渐变的内圆和外圆。当应用于椭圆时，它会产生类似 3D 球体的效果。
来源
在本文中，我们探索了在 HTML Canvas 上绘制椭圆的各种技术。从基本形状到旋转和渐变填充的椭圆，这些方法可在 Web 应用程序中实现复杂的图形。
作者
列出 所有 JS Canvas 教程。