似乎没有原生的函数可以画出类似椭圆形状的图形，而且我也不想要一个蛋形状。是否有可能用两个贝塞尔曲线来绘制椭圆呢？ 有人有经验吗？
我的目的是画一些眼睛，实际上我只是用弧线来绘制。提前感谢。
解决方案
scale() 函数可以改变所有后续图形的缩放比例。save() 函数保存设置，而 restore() 函数用于还原设置以绘制新的形状而不进行缩放。
感谢 Jani 的帮助。
ctx.save();
ctx.scale(0.75, 1);
ctx.beginPath();
ctx.arc(20, 21, 10, 0, Math.PI*2, false);
ctx.stroke();
ctx.closePath();
ctx.restore();
更新：
JSBin 测试示例（已更新以测试其他答案进行比较）
原始：
如果你想要一个对称的椭圆，你可以创建一个半径为宽度的圆，然后将其缩放到所需的高度（编辑：请注意，这会影响线条宽度外观 - 参见acdameli的答案），但如果你想要完全控制椭圆，这里有一种使用贝塞尔曲线的方法。
<canvas id="thecanvas" width="400" height="400"></canvas>
<script>
var canvas = document.getElementById('thecanvas');
if(canvas.getContext)
{
var ctx = canvas.getContext('2d');
drawEllipse(ctx, 10, 10, 100, 60);
drawEllipseByCenter(ctx, 60,40,20,10);
}
function drawEllipseByCenter(ctx, cx, cy, w, h) {
drawEllipse(ctx, cx - w/2.0, cy - h/2.0, w, h);
}
function drawEllipse(ctx, x, y, w, h) {
var kappa = .5522848,
ox = (w / 2) * kappa, // control point offset horizontal
oy = (h / 2) * kappa, // control point offset vertical
xe = x + w, // x-end
ye = y + h, // y-end
xm = x + w / 2, // x-middle
ym = y + h / 2; // y-middle
ctx.beginPath();
ctx.moveTo(x, ym);
ctx.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
ctx.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
ctx.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
ctx.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
//ctx.closePath(); // not used correctly, see comments (use to close off open path)
ctx.stroke();
}
</script>
以下是其他地方解决方案的简化版本。我绘制了一个规范的圆形，进行平移和缩放，然后描边。
function ellipse(context, cx, cy, rx, ry){
context.save(); // save state
context.beginPath();
context.translate(cx-rx, cy-ry);
context.scale(rx, ry);
context.arc(1, 1, 1, 0, 2 * Math.PI, false);
context.restore(); // restore to original state
context.stroke();
}
context 与 scale 来处理繁重的工作。 - adu对于简单的椭圆形，贝塞尔曲线方法非常好用。如果需要更多控制，可以使用循环以不同的x和y半径值（radiuses, radii？）来绘制椭圆。
添加旋转角度参数(rotationAngle parameter)可以使椭圆沿中心旋转任意角度。通过改变循环运行的范围（var i），可以绘制部分椭圆形。
使用这种方式渲染椭圆可以确定线上所有点的精确xy位置。如果其他对象的位置和方向依赖于椭圆的位置和方向，则此方法非常有用。
这里是代码示例：
for (var i = 0 * Math.PI; i < 2 * Math.PI; i += 0.01 ) {
xPos = centerX - (radiusX * Math.sin(i)) * Math.sin(rotationAngle * Math.PI) + (radiusY * Math.cos(i)) * Math.cos(rotationAngle * Math.PI);
yPos = centerY + (radiusY * Math.cos(i)) * Math.sin(rotationAngle * Math.PI) + (radiusX * Math.sin(i)) * Math.cos(rotationAngle * Math.PI);
if (i == 0) {
cxt.moveTo(xPos, yPos);
} else {
cxt.lineTo(xPos, yPos);
}
}
在此处查看交互式示例：http://www.scienceprimer.com/draw-oval-html5-canvas
你可以尝试使用非均匀缩放。你可以提供X和Y缩放，只需将X或Y缩放设置得比另一个大，并绘制一个圆，你就有了一个椭圆。
function ellipse(cx, cy, w, h){
var ctx = canvas.getContext('2d');
ctx.beginPath();
var lx = cx - w/2,
rx = cx + w/2,
ty = cy - h/2,
by = cy + h/2;
var magic = 0.551784;
var xmagic = magic*w/2;
var ymagic = h*magic/2;
ctx.moveTo(cx,ty);
ctx.bezierCurveTo(cx+xmagic,ty,rx,cy-ymagic,rx,cy);
ctx.bezierCurveTo(rx,cy+ymagic,cx+xmagic,by,cx,by);
ctx.bezierCurveTo(cx-xmagic,by,lx,cy+ymagic,lx,cy);
ctx.bezierCurveTo(lx,cy-ymagic,cx-xmagic,ty,cx,ty);
ctx.stroke();
}
/* draw ellipse
* x0,y0 = center of the ellipse
* a = greater semi-axis
* exc = ellipse excentricity (exc = 0 for circle, 0 < exc < 1 for ellipse, exc > 1 for hyperbole)
*/
function drawEllipse(ctx, x0, y0, a, exc, lineWidth, color)
{
x0 += a * exc;
var r = a * (1 - exc*exc)/(1 + exc),
x = x0 + r,
y = y0;
ctx.beginPath();
ctx.moveTo(x, y);
var i = 0.01 * Math.PI;
var twoPi = 2 * Math.PI;
while (i < twoPi) {
r = a * (1 - exc*exc)/(1 + exc * Math.cos(i));
x = x0 + r * Math.cos(i);
y = y0 + r * Math.sin(i);
ctx.lineTo(x, y);
i += 0.01;
}
ctx.lineWidth = lineWidth;
ctx.strokeStyle = color;
ctx.closePath();
ctx.stroke();
}
我的解决方案与所有这些解决方案有些不同。我认为最接近的是上面得票最多的答案，但我认为这种方法更清洁、更易理解。
http://jsfiddle.net/jaredwilli/CZeEG/4/
function bezierCurve(centerX, centerY, width, height) {
con.beginPath();
con.moveTo(centerX, centerY - height / 2);
con.bezierCurveTo(
centerX + width / 2, centerY - height / 2,
centerX + width / 2, centerY + height / 2,
centerX, centerY + height / 2
);
con.bezierCurveTo(
centerX - width / 2, centerY + height / 2,
centerX - width / 2, centerY - height / 2,
centerX, centerY - height / 2
);
con.fillStyle = 'white';
con.fill();
con.closePath();
}
然后像这样使用：
bezierCurve(x + 60, y + 75, 80, 130);
ctx.lineWidth = 4;
ctx.scale(1, 0.5);
ctx.beginPath();
ctx.arc(20, 20, 10, 0, Math.PI * 2, false);
ctx.stroke();
您需要注意的是，椭圆峰谷处线条的宽度只有左右两端顶点的一半。
ctx.scale(0.5, 1);。 - Johnathan HebertChrome和Opera支持canvas 2d context的ellipse方法，但IE、Edge、Firefox和Safari不支持。
我们可以通过JS实现ellipse方法或使用第三方polyfill。
ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)
使用示例：
ctx.ellipse(20, 21, 10, 10, 0, 0, Math.PI*2, true);
if (CanvasRenderingContext2D.prototype.ellipse == undefined) {
CanvasRenderingContext2D.prototype.ellipse = function(x, y, radiusX, radiusY,
rotation, startAngle, endAngle, antiClockwise) {
this.save();
this.translate(x, y);
this.rotate(rotation);
this.scale(radiusX, radiusY);
this.arc(0, 0, 1, startAngle, endAngle, antiClockwise);
this.restore();
}
}
stroke()之前放置restore()，它将不会扭曲线条，正如Johnathan Hebert在下面的Steve Tranby的答案评论中提到的那样。此外，这是closePath()不必要和不正确的使用。这种误解的方法... https://dev59.com/Ymgv5IYBdhLWcg3wKtlB#16104699 - Brian McCutchon