blocks|key|3277864|text|更新：|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|3277865|3277866|缩放方法可以影响笔划宽度外观|unordered-list-item|3277867|缩放方法做得正确可以保持笔划宽度不变|3277868|canvas有椭圆方法，Chrome现在支持|3277869|向JSBin+|3277870|添加了更新的测试|3277871|JSBin+Testing+Example+(更新为测试其他人的答案以进行比较)|3277872|answer+|3277873|Bezier+-基于左上角绘制，包含矩形和带中心的width/height|3277874|Bezier+-基于中心和width/height|3277875|Arcs绘制以及缩放-基于绘制圆和缩放绘制|3277876|请参阅Deven+Kalra's+rect|3277877|3277878|3277879|​|3277880|3277881|二次曲线-使用二次曲线绘制|3277882|测试似乎绘制得不太一样，可能是implementation|3277883|see+|3277884|3277885|3277886|3277887|3277888|3277889|3277890|画布椭圆--使用W3C标准椭圆()方法测试|3277891|似乎画的不太一样，可能是implementation|3277892|see+Loktar's+answer|3277893|3277894|3277895|3277896|原创：|3277897|如果你想要一个对称的椭圆，你可以创建一个半径宽度的圆，然后将它缩放到你想要的高度(编辑:注意这会影响笔划宽度的外观-参见acdameli的答案)，但如果你想完全控制椭圆，这里有一种使用bezier曲线的方法。|3277898|<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+%2B+w,+++++++++++//+x-end
++++++ye+=+y+%2B+h,+++++++++++//+y-end
++++++xm+=+x+%2B+w+/+2,+++++++//+x-middle
++++++ym+=+y+%2B+h+/+2;+++++++//+y-middle

++ctx.beginPath();
++ctx.moveTo(x,+ym);
++ctx.bezierCurveTo(x,+ym+-+oy,+xm+-+ox,+y,+xm,+y);
++ctx.bezierCurveTo(xm+%2B+ox,+y,+xe,+ym+-+oy,+xe,+ym);
++ctx.bezierCurveTo(xe,+ym+%2B+oy,+xm+%2B+ox,+ye,+xm,+ye);
++ctx.bezierCurveTo(xm+-+ox,+ye,+x,+ym+%2B+oy,+x,+ym);
++//ctx.closePath();+//+not+used+correctly,+see+comments+(use+to+close+off+open+path)
++ctx.stroke();
}

</script>|code-block|syntax|javascript|3277899|entityMap|0|LINK|mutability|MUTABLE|url|http://jsbin.com/ovuret/722/edit|1|https://stackoverflow.com/a/8372834/415|2|https://stackoverflow.com/a/23184724/415^0|0|3|0|0|0|0|0|0|0|0|L|0|0|0|0|0|1|3|D|1|1|0|0|0|0|1|1|2|2|1|0|0|0|0|1|1|4|8|2|1|0|0|0|0|3|0|0|0^^$0|@$1|2|3|4|5|6|7|2E|8|@$9|2F|A|2G|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|2H|8|@]|D|@]|E|$]]|$1|G|3|H|5|I|7|2I|8|@]|D|@]|E|$]]|$1|J|3|K|5|I|7|2J|8|@]|D|@]|E|$]]|$1|L|3|M|5|I|7|2K|8|@]|D|@]|E|$]]|$1|N|3|O|5|I|7|2L|8|@]|D|@]|E|$]]|$1|P|3|Q|5|6|7|2M|8|@]|D|@]|E|$]]|$1|R|3|S|5|6|7|2N|8|@]|D|@$9|2O|A|2P|1|2Q]]|E|$]]|$1|T|3|U|5|6|7|2R|8|@]|D|@]|E|$]]|$1|V|3|W|5|I|7|2S|8|@]|D|@]|E|$]]|$1|X|3|Y|5|I|7|2T|8|@]|D|@]|E|$]]|$1|Z|3|10|5|I|7|2U|8|@]|D|@]|E|$]]|$1|11|3|12|5|I|7|2V|8|@]|D|@$9|2W|A|2X|1|2Y]]|E|$]]|$1|13|3|-4|5|6|7|2Z|8|@]|D|@]|E|$]]|$1|14|3|-4|5|6|7|30|8|@]|D|@]|E|$]]|$1|15|3|16|5|6|7|31|8|@]|D|@]|E|$]]|$1|17|3|-4|5|6|7|32|8|@]|D|@]|E|$]]|$1|18|3|19|5|I|7|33|8|@]|D|@]|E|$]]|$1|1A|3|1B|5|I|7|34|8|@]|D|@]|E|$]]|$1|1C|3|1D|5|I|7|35|8|@]|D|@]|E|$]]|$1|1E|3|-4|5|I|7|36|8|@]|D|@]|E|$]]|$1|1F|3|-4|5|6|7|37|8|@]|D|@]|E|$]]|$1|1G|3|-4|5|6|7|38|8|@]|D|@]|E|$]]|$1|1H|3|-4|5|6|7|39|8|@]|D|@]|E|$]]|$1|1I|3|16|5|6|7|3A|8|@]|D|@]|E|$]]|$1|1J|3|-4|5|6|7|3B|8|@]|D|@]|E|$]]|$1|1K|3|1L|5|I|7|3C|8|@]|D|@]|E|$]]|$1|1M|3|1N|5|I|7|3D|8|@]|D|@]|E|$]]|$1|1O|3|1P|5|I|7|3E|8|@]|D|@$9|3F|A|3G|1|3H]]|E|$]]|$1|1Q|3|-4|5|6|7|3I|8|@]|D|@]|E|$]]|$1|1R|3|-4|5|6|7|3J|8|@]|D|@]|E|$]]|$1|1S|3|16|5|6|7|3K|8|@]|D|@]|E|$]]|$1|1T|3|1U|5|6|7|3L|8|@$9|3M|A|3N|B|C]]|D|@]|E|$]]|$1|1V|3|1W|5|6|7|3O|8|@]|D|@]|E|$]]|$1|1X|3|1Y|5|1Z|7|3P|8|@]|D|@]|E|$20|21]]|$1|22|3|-4|5|6|7|3Q|8|@]|D|@]|E|$]]]|23|$24|$5|25|26|27|E|$28|29]]|2A|$5|25|26|27|E|$28|2B]]|2C|$5|25|26|27|E|$28|2D]]]]

updates:

<ul>
<li>scaling method can affect stroke width appearance </li>
<li>scaling method done right can keep stroke width intact</li>
<li>canvas has ellipse method that Chrome now supports </li>
<li>added updated tests to JSBin </li>
</ul>

<a href="http://jsbin.com/ovuret/722/edit" rel="noreferrer">JSBin Testing Example</a> (updated to test other's answers for comparison)

<ul>
<li>Bezier - draw based on top left containing rect and width/height</li>
<li>Bezier with Center - draw based on center and width/height</li>
<li>Arcs and Scaling - draw based on drawing circle and scaling 

<ul>
<li>see <a href="https://stackoverflow.com/a/8372834/415">Deven Kalra's</a> answer</li>
</ul></li>
<li>Quadratic Curves - draw with quadratics

<ul>
<li>test appears to not draw quite the same, may be implementation</li>
<li>see <a href="https://stackoverflow.com/a/15162444/415">oyophant's</a> answer</li>
</ul></li>
<li>Canvas Ellipse - using W3C standard ellipse() method 

<ul>
<li>test appears to not draw quite the same, may be implementation</li>
<li>see <a href="https://stackoverflow.com/a/23184724/415">Loktar's</a> answer</li>
</ul></li>
</ul>

Original:

If you want a symmetrical oval you could always create a circle of radius width, and then scale it to the height you want (edit: notice this will affect stroke width appearance - see acdameli's answer), but if you want full control of the ellipse here's one way using bezier curves. 

<pre><code>&lt;canvas id="thecanvas" width="400" height="400"&gt;&lt;/canvas&gt;

&lt;script&gt;
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();
}

&lt;/script&gt;
</code></pre>

blocks|key|3064878|text|您也可以尝试使用非均匀缩放。您可以提供X和Y缩放，因此只需将X或Y缩放设置为大于另一个，然后绘制一个圆，您就得到了一个椭圆。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3064879|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

You could also try using non-uniform scaling. You can provide X and Y scaling, so simply set X or Y scaling larger than the other, and draw a circle, and you have an ellipse.

blocks|key|3064921|text|我喜欢上面的Bezier曲线解决方案。我注意到比例也会影响线条的宽度，所以如果你试图绘制一个宽于高的椭圆，你的顶部和底部的“边”将比你的左右“边”看起来更薄。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3064922|一个很好的例子是：|3064923|ctx.lineWidth+=+4;
ctx.scale(1,+0.5);
ctx.beginPath();
ctx.arc(20,+20,+10,+0,+Math.PI+*+2,+false);
ctx.stroke();|code-block|syntax|javascript|3064924|你应该注意到在椭圆的顶点和谷处的线的宽度是在左右两个顶点(顶点？)的宽度的一半。|3064925|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

I like the Bezier curves solution above. I noticed the scale also affects the line width so if you're trying to draw an ellipse that is wider than it is tall, your top and bottom "sides" will appear thinner than your left and right "sides"...

a good example would be:

<pre><code>ctx.lineWidth = 4;
ctx.scale(1, 0.5);
ctx.beginPath();
ctx.arc(20, 20, 10, 0, Math.PI * 2, false);
ctx.stroke();
</code></pre>

you should notice the width of the line at the peak and valley of the ellipse are half as wide as at the left and right apexes (apices?).

blocks|key|3064955|text|是的，可以使用两条贝塞尔曲线-这里有一个简短的教程/示例：http://www.williammalone.com/briefs/how-to-draw-ellipse-html5-canvas/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3064956|entityMap|0|LINK|mutability|MUTABLE|url|http://www.williammalone.com/briefs/how-to-draw-ellipse-html5-canvas/^0|T|1X|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

Yes, it is possible with two bezier curves - here's a brief tutorial/example:
<a href="http://www.williammalone.com/briefs/how-to-draw-ellipse-html5-canvas/" rel="nofollow">http://www.williammalone.com/briefs/how-to-draw-ellipse-html5-canvas/</a>

blocks|key|3278016|text|这里是其他地方解决方案的简化版本。我画了一个标准圆，平移，缩放，然后描边。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3278017|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();
}|code-block|syntax|javascript|3278018|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Here is a simplified version of solutions elsewhere. I draw a canonical circle, translate and scale and then stroke.

<pre><code>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();
}
</code></pre>

blocks|key|3278032|text|我的解决方案与所有这些略有不同。虽然我认为最接近的答案是上面投票最多的答案，但我认为这种方式更清晰，更容易理解。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3278033|http://jsfiddle.net/jaredwilli/CZeEG/4/|offset|length|3278034|++++function+bezierCurve(centerX,+centerY,+width,+height)+{
++++con.beginPath();
++++con.moveTo(centerX,+centerY+-+height+/+2);

++++con.bezierCurveTo(
++++++++centerX+%2B+width+/+2,+centerY+-+height+/+2,
++++++++centerX+%2B+width+/+2,+centerY+%2B+height+/+2,
++++++++centerX,+centerY+%2B+height+/+2
++++);
++++con.bezierCurveTo(
++++++++centerX+-+width+/+2,+centerY+%2B+height+/+2,
++++++++centerX+-+width+/+2,+centerY+-+height+/+2,
++++++++centerX,+centerY+-+height+/+2
++++);

++++con.fillStyle+=+'white';
++++con.fill();
++++con.closePath();
}|code-block|syntax|javascript|3278035|然后像这样使用它：|3278036|bezierCurve(x+%2B+60,+y+%2B+75,+80,+130);|3278037|在小提琴中有几个使用示例，还有一个使用quadraticCurveTo的失败尝试。|3278038|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|13|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@]|9|@$D|Z|E|10|1|11]]|A|$]]|$1|F|3|G|5|H|7|12|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|13|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|14|8|@]|9|@]|A|$I|J]]|$1|O|3|P|5|6|7|15|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|C]]]]

My solution is a bit different than all of these. Closest I think is the most voted answer above though, but I think this way is a bit cleaner and easier to comprehend.

<a href="http://jsfiddle.net/jaredwilli/CZeEG/4/" rel="noreferrer">http://jsfiddle.net/jaredwilli/CZeEG/4/</a>

<pre><code> 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();
}
</code></pre>

And then use it like this:

<pre><code>bezierCurve(x + 60, y + 75, 80, 130);
</code></pre>

There are a couple use examples in the fiddle, along with a failed attempt to make one using quadraticCurveTo.

blocks|key|3278060|text|bezier曲线方法对于简单的椭圆是很好的。为了获得更多的控制，您可以使用循环来绘制具有不同x和y半径值(半径，半径？)的椭圆。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3278061|通过添加rotationAngle参数，可以使椭圆围绕其中心旋转任意角度。可以通过更改循环运行的范围(var+i)来绘制部分椭圆。|3278062|以这种方式呈现椭圆可以确定直线上所有点的确切x，y位置。如果其他对象的位置取决于椭圆的位置和方向，则此选项非常有用。|3278063|以下是代码的示例：|3278064|for+(var+i+=+0+*+Math.PI;+i+<+2+*+Math.PI;+i+%2B=+0.01+)+{
++++xPos+=+centerX+-+(radiusX+*+Math.sin(i))+*+Math.sin(rotationAngle+*+Math.PI)+%2B+(radiusY+*+Math.cos(i))+*+Math.cos(rotationAngle+*+Math.PI);
++++yPos+=+centerY+%2B+(radiusY+*+Math.cos(i))+*+Math.sin(rotationAngle+*+Math.PI)+%2B+(radiusX+*+Math.sin(i))+*+Math.cos(rotationAngle+*+Math.PI);

++++if+(i+==+0)+{
++++++++cxt.moveTo(xPos,+yPos);
++++}+else+{
++++++++cxt.lineTo(xPos,+yPos);
++++}
}|code-block|syntax|javascript|3278065|请看这里的交互式示例：http://www.scienceprimer.com/draw-oval-html5-canvas|offset|length|3278066|entityMap|0|LINK|mutability|MUTABLE|url|http://www.scienceprimer.com/draw-oval-html5-canvas^0|0|0|0|0|0|B|1F|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|10|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|11|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|12|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|13|8|@]|9|@$O|14|P|15|1|16]]|A|$]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

The bezier curve approach is great for simple ovals. For more control, you can use a loop to draw an ellipse with different values for the x and y radius (radiuses, radii?). 

Adding a rotationAngle parameter allows the oval to be rotated around its center by any angle. Partial ovals can be drawn by changing the range (var i) over which the loop runs. 

Rendering the oval this way allows you to determine the exact x,y location of all points on the line. This is useful if the postion of other objects depend on the location and orientation of the oval. 

Here is an example of the code:

<pre><code>for (var i = 0 * Math.PI; i &lt; 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);
 }
}
</code></pre>

See an interactive example here: <a href="http://www.scienceprimer.com/draw-oval-html5-canvas">http://www.scienceprimer.com/draw-oval-html5-canvas</a>

blocks|key|315903|text|我对this+code+(由Andrew+Staroscik部分介绍)做了一点修改，以满足那些不想要如此一般的椭圆，并且只有椭圆的更大的半轴和偏心数据的人(例如，很适合用来绘制轨道的天文javascript玩具)。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|315904|在这里，请记住，可以调整i中的步骤，使其在绘图中具有更高的精度：|style|CODE|315905|/*+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+%2B=+a+*+exc;
++++var+r+=+a+*+(1+-+exc*exc)/(1+%2B+exc),
++++++++x+=+x0+%2B+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+%2B+exc+*+Math.cos(i));
++++++++x+=+x0+%2B+r+*+Math.cos(i);
++++++++y+=+y0+%2B+r+*+Math.sin(i);
++++++++ctx.lineTo(x,+y);
++++++++i+%2B=+0.01;
++++}
++++ctx.lineWidth+=+lineWidth;
++++ctx.strokeStyle+=+color;
++++ctx.closePath();
++++ctx.stroke();
}|code-block|syntax|javascript|315906|entityMap|0|LINK|mutability|MUTABLE|url|http://www.scienceprimer.com/draw-oval-html5-canvas^0|2|9|0|0|C|1|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|6|7|Y|8|@$A|Z|B|10|F|G]]|9|@]|C|$]]|$1|H|3|I|5|J|7|11|8|@]|9|@]|C|$K|L]]|$1|M|3|-4|5|6|7|12|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

I did a little adaptation of <a href="http://www.scienceprimer.com/draw-oval-html5-canvas" rel="nofollow">this code</a> (partially presented by Andrew Staroscik) for peoplo who do not want a so general ellipse and who have only the greater semi-axis and the excentricity data of the ellipse (good for astronomical javascript toys to plot orbits, for instance).

Here you go, remembering that one can adapt the steps in <code>i</code> to have a greater precision in the drawing:

<pre><code>/* draw ellipse
 * x0,y0 = center of the ellipse
 * a = greater semi-axis
 * exc = ellipse excentricity (exc = 0 for circle, 0 &lt; exc &lt; 1 for ellipse, exc &gt; 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 &lt; 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();
}
</code></pre>

blocks|key|3065092|text|您需要4条bezier曲线(和一个幻数)才能可靠地重现椭圆。请看这里：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3065093|www.tinaja.com/glib/ellipse4.pdf|offset|length|3065094|两个贝塞尔曲线不能精确地再现一个椭圆。为了证明这一点，尝试上面两个等高等宽的bezier解决方案中的一些-理想情况下它们应该近似于一个圆，但它们不会。它们看起来仍然是椭圆形，这证明它们没有做应该做的事情。|3065095|下面是一些应该起作用的东西：|3065096|http://jsfiddle.net/BsPsj/|3065097|代码如下：|3065098|function+ellipse(cx,+cy,+w,+h){
++++var+ctx+=+canvas.getContext('2d');
++++ctx.beginPath();
++++var+lx+=+cx+-+w/2,
++++++++rx+=+cx+%2B+w/2,
++++++++ty+=+cy+-+h/2,
++++++++by+=+cy+%2B+h/2;
++++var+magic+=+0.551784;
++++var+xmagic+=+magic*w/2;
++++var+ymagic+=+h*magic/2;
++++ctx.moveTo(cx,ty);
++++ctx.bezierCurveTo(cx%2Bxmagic,ty,rx,cy-ymagic,rx,cy);
++++ctx.bezierCurveTo(rx,cy%2Bymagic,cx%2Bxmagic,by,cx,by);
++++ctx.bezierCurveTo(cx-xmagic,by,lx,cy%2Bymagic,lx,cy);
++++ctx.bezierCurveTo(lx,cy-ymagic,cx-xmagic,ty,cx,ty);
++++ctx.stroke();


}|code-block|syntax|javascript|3065099|entityMap|0|LINK|mutability|MUTABLE|url|http://www.tinaja.com/glib/ellipse4.pdf|1^0|0|0|W|0|0|0|0|0|Q|1|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|12|8|@]|9|@$D|13|E|14|1|15]]|A|$]]|$1|F|3|G|5|6|7|16|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|17|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|18|8|@]|9|@$D|19|E|1A|1|1B]]|A|$]]|$1|L|3|M|5|6|7|1C|8|@]|9|@]|A|$]]|$1|N|3|O|5|P|7|1D|8|@]|9|@]|A|$Q|R]]|$1|S|3|-4|5|6|7|1E|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]|10|$5|V|W|X|A|$Y|K]]]]

You need 4 bezier curves (and a magic number) to reliably reproduce an ellipse. See here:

<a href="http://www.tinaja.com/glib/ellipse4.pdf">www.tinaja.com/glib/ellipse4.pdf</a>

Two beziers don't accurately reproduce an ellipse. To prove this, try some of the 2 bezier solutions above with equal height and width - they should ideally approximate a circle but they won't. They'll still look oval which goes to prove they aren't doing what they are supposed to. 

Here's something that should work:

<a href="http://jsfiddle.net/BsPsj/">http://jsfiddle.net/BsPsj/</a>

Here's the code:

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


}
</code></pre>

blocks|key|317987|text|由于没有人提出使用更简单的quadraticCurveTo的方法，因此我为此添加了一个解决方案。只需将@Steve的answer中的bezierCurveTo调用替换为：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|317988|++ctx.quadraticCurveTo(x,y,xm,y);
++ctx.quadraticCurveTo(xe,y,xe,ym);
++ctx.quadraticCurveTo(xe,ye,xm,ye);
++ctx.quadraticCurveTo(x,ye,x,ym);|code-block|syntax|javascript|317989|您也可以删除closePath。不过，椭圆形看起来略有不同。|317990|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas#2173084^0|D|G|1U|D|1M|6|0|0|0|6|9|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|F|3|G|5|H|7|12|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|13|8|@$9|14|A|15|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|16|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

Since nobody came up with an approach using the simpler <code>quadraticCurveTo</code> I am adding a solution for that. Simply replace the <code>bezierCurveTo</code> calls in the @Steve's <a href="https://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas#2173084">answer</a> with this:

<pre><code> ctx.quadraticCurveTo(x,y,xm,y);
 ctx.quadraticCurveTo(xe,y,xe,ym);
 ctx.quadraticCurveTo(xe,ye,xm,ye);
 ctx.quadraticCurveTo(x,ye,x,ym);
</code></pre>

You may also remove the <code>closePath</code>. The oval is looking slightly different though.

blocks|key|3278179|text|下面是我编写的一个函数，它使用与SVG中的椭圆弧相同的值。X1和Y1是最后一个坐标，X2和Y2是结束坐标，radius是一个数值，顺时针是一个布尔值。它还假设已经定义了canvas上下文。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3278180|function+ellipse(x1,+y1,+x2,+y2,+radius,+clockwise)+{

var+cBx+=+(x1+%2B+x2)+/+2;++++//get+point+between+xy1+and+xy2
var+cBy+=+(y1+%2B+y2)+/+2;
var+aB+=+Math.atan2(y1+-+y2,+x1+-+x2);++//get+angle+to+bulge+point+in+radians
if+(clockwise)+{+aB+%2B=+(90+*+(Math.PI+/+180));+}
else+{+aB+-=+(90+*+(Math.PI+/+180));+}
var+op_side+=+Math.sqrt(Math.pow(x1+-+x2,+2)+%2B+Math.pow(y1+-+y2,+2))+/+2;
var+adj_side+=+Math.sqrt(Math.pow(radius,+2)+-+Math.pow(op_side,+2));

if+(isNaN(adj_side))+{
++++adj_side+=+Math.sqrt(Math.pow(op_side,+2)+-+Math.pow(radius,+2));
}

var+Cx+=+cBx+%2B+(adj_side+*+Math.cos(aB));++++++++++++
var+Cy+=+cBy+%2B+(adj_side+*+Math.sin(aB));
var+startA+=+Math.atan2(y1+-+Cy,+x1+-+Cx);+++++++//get+start/end+angles+in+radians
var+endA+=+Math.atan2(y2+-+Cy,+x2+-+Cx);
var+mid+=+(startA+%2B+endA)+/+2;
var+Mx+=+Cx+%2B+(radius+*+Math.cos(mid));
var+My+=+Cy+%2B+(radius+*+Math.sin(mid));
context.arc(Cx,+Cy,+radius,+startA,+endA,+clockwise);
}|code-block|syntax|javascript|3278181|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Here's a function I wrote that uses the same values as the ellipse arc in SVG. X1 &amp; Y1 are the last coordinates, X2 &amp; Y2 are the end coordinates, radius is a number value and clockwise is a boolean value. It also assumes your canvas context has already been defined.

<pre><code>function ellipse(x1, y1, x2, y2, radius, clockwise) {

var cBx = (x1 + x2) / 2; //get point between xy1 and xy2
var cBy = (y1 + y2) / 2;
var aB = Math.atan2(y1 - y2, x1 - x2); //get angle to bulge point in radians
if (clockwise) { aB += (90 * (Math.PI / 180)); }
else { aB -= (90 * (Math.PI / 180)); }
var op_side = Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2)) / 2;
var adj_side = Math.sqrt(Math.pow(radius, 2) - Math.pow(op_side, 2));

if (isNaN(adj_side)) {
 adj_side = Math.sqrt(Math.pow(op_side, 2) - Math.pow(radius, 2));
}

var Cx = cBx + (adj_side * Math.cos(aB)); 
var Cy = cBy + (adj_side * Math.sin(aB));
var startA = Math.atan2(y1 - Cy, x1 - Cx); //get start/end angles in radians
var endA = Math.atan2(y2 - Cy, x2 - Cx);
var mid = (startA + endA) / 2;
var Mx = Cx + (radius * Math.cos(mid));
var My = Cy + (radius * Math.sin(mid));
context.arc(Cx, Cy, radius, startA, endA, clockwise);
}
</code></pre>

blocks|key|320938|text|这是另一种创建类似椭圆的形状的方法，尽管它使用了"+fillRect()“函数，但也可以用来更改fillRect()函数中的参数。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|320939|<!DOCTYPE+html>
<html+lang="en">
<head>
++++<title>Sine+and+cosine+functions</title>
</head>
<body>
<canvas+id="trigCan"+width="400"+height="400"></canvas>

<script+type="text/javascript">
var+canvas+=+document.getElementById("trigCan"),+ctx+=+canvas.getContext('2d');
for+(var+i+=+0;+i+<+360;+i%2B%2B)+{
++++var+x+=+Math.sin(i),+y+=+Math.cos(i);
++++ctx.stroke();
++++ctx.fillRect(50+*+2+*+x+*+2+/+5+%2B+200,+40+*+2+*+y+/+4+%2B+200,+10,+10,+true);
}
</script>
</body>
</html>|code-block|syntax|javascript|320940|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This is another way of creating an ellipse like shape, although it uses the "fillRect()" function this can be used be changing the arguments in the fillRect() function.

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
 &lt;title&gt;Sine and cosine functions&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;canvas id="trigCan" width="400" height="400"&gt;&lt;/canvas&gt;

&lt;script type="text/javascript"&gt;
var canvas = document.getElementById("trigCan"), ctx = canvas.getContext('2d');
for (var i = 0; i &lt; 360; i++) {
 var x = Math.sin(i), y = Math.cos(i);
 ctx.stroke();
 ctx.fillRect(50 * 2 * x * 2 / 5 + 200, 40 * 2 * y / 4 + 200, 10, 10, true);
}
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

blocks|key|318033|text|用这个你甚至可以画一个椭圆的线段：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|318034|function+ellipse(color,+lineWidth,+x,+y,+stretchX,+stretchY,+startAngle,+endAngle)+{
++++for+(var+angle+=+startAngle;+angle+<+endAngle;+angle+%2B=+Math.PI+/+180)+{
++++++++ctx.beginPath()
++++++++ctx.moveTo(x,+y)
++++++++ctx.lineTo(x+%2B+Math.cos(angle)+*+stretchX,+y+%2B+Math.sin(angle)+*+stretchY)
++++++++ctx.lineWidth+=+lineWidth
++++++++ctx.strokeStyle+=+color
++++++++ctx.stroke()
++++++++ctx.closePath()
++++}
}|code-block|syntax|javascript|318035|http://jsfiddle.net/FazAe/1/|offset|length|318036|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|S|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|T|8|@]|9|@$I|U|J|V|1|W]]|A|$]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|H]]]]

With this you can even draw segments of an ellipse:

<pre><code>function ellipse(color, lineWidth, x, y, stretchX, stretchY, startAngle, endAngle) {
 for (var angle = startAngle; angle &lt; endAngle; angle += Math.PI / 180) {
 ctx.beginPath()
 ctx.moveTo(x, y)
 ctx.lineTo(x + Math.cos(angle) * stretchX, y + Math.sin(angle) * stretchY)
 ctx.lineWidth = lineWidth
 ctx.strokeStyle = color
 ctx.stroke()
 ctx.closePath()
 }
}
</code></pre>

<a href="http://jsfiddle.net/FazAe/1/" rel="nofollow">http://jsfiddle.net/FazAe/1/</a>

blocks|key|3278255|text|现在有一个用于画布的原生ellipse函数，非常类似于圆弧函数，尽管现在我们有两个半径值和一个令人敬畏的旋转。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3278256|旋转椭圆(x，y，radiusX，radiusY，|3278257|，startAngle，endAngle，逆时针)|blockquote|3278258|3278259|3278260|3278261|ctx.ellipse(100,+100,+10,+15,+0,+0,+Math.PI*2);
ctx.fill();|code-block|syntax|javascript|3278262|目前似乎只能在Chrome中使用|3278263|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/html/wg/drafts/2dcontext/html5_canvas/#dom-context-2d-ellipse^0|C|7|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@$A|11|B|12|1|13]]|C|$]]|$1|D|3|E|5|6|7|14|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|15|8|@]|9|@]|C|$]]|$1|I|3|-4|5|6|7|16|8|@]|9|@]|C|$]]|$1|J|3|-4|5|6|7|17|8|@]|9|@]|C|$]]|$1|K|3|-4|5|6|7|18|8|@]|9|@]|C|$]]|$1|L|3|M|5|N|7|19|8|@]|9|@]|C|$O|P]]|$1|Q|3|R|5|6|7|1A|8|@]|9|@]|C|$]]|$1|S|3|-4|5|6|7|1B|8|@]|9|@]|C|$]]]|T|$U|$5|V|W|X|C|$Y|Z]]]]

There is now a native <a href="http://www.w3.org/html/wg/drafts/2dcontext/html5_canvas/#dom-context-2d-ellipse" rel="noreferrer">ellipse</a> function for canvas, very similar to the arc function although now we have two radius values and a rotation which is awesome.

<blockquote>
 ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise) 
</blockquote>

<a href="http://jsfiddle.net/loktar/2reS9/" rel="noreferrer">Live Demo</a>

<pre><code>ctx.ellipse(100, 100, 10, 15, 0, 0, Math.PI*2);
ctx.fill();
</code></pre>

Only seems to work in Chrome currently

blocks|key|3278395|text|Chrome和Opera支持画布2d上下文的ellipse方法，但IE、Edge、Firefox和Safari不支持。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3278396|我们可以通过JS实现椭圆方法，也可以使用第三方polyfill。|3278397|ellipse(x,+y,+radiusX,+radiusY,+rotation,+startAngle,+endAngle,+anticlockwise)|code-block|syntax|javascript|3278398|使用示例：|3278399|ctx.ellipse(20,+21,+10,+10,+0,+0,+Math.PI*2,+true);|3278400|您可以使用canvas-5-polyfill来提供椭圆方法。|3278401|或者只是粘贴一些js代码来提供省略方法：|3278402|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();
++}
}|3278403|​|3278404|📷|atomic|3278405|3278406|3278407|3278408|3278409|3278410|3278411|3278412|3278413|3278414|3278415|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/ellipse|1|https://github.com/google/canvas-5-polyfill|2|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/7b827ecd05ee5ae98694044b49946dbc.png|imageAlt|3|https://ask.qcloudimg.com/http-save/yehe-900000/a9f7e03fb23ccb31f7006d4f40f596ef.png|4|https://ask.qcloudimg.com/http-save/yehe-900000/0b593652abcc8e93147b0ec799e46ee4.png|5|https://ask.qcloudimg.com/http-save/yehe-900000/47a4fdb7a35aa65ee29449e4a8e68861.png^0|M|7|0|0|0|0|0|0|5|H|1|0|0|0|0|0|1|2|0|0|0|0|1|3|0|0|0|0|1|4|0|0|0|0|1|5|0|0^^$0|@$1|2|3|4|5|6|7|1V|8|@]|9|@$A|1W|B|1X|1|1Y]]|C|$]]|$1|D|3|E|5|6|7|1Z|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|20|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|21|8|@]|9|@]|C|$]]|$1|M|3|N|5|H|7|22|8|@]|9|@]|C|$I|J]]|$1|O|3|P|5|6|7|23|8|@]|9|@$A|24|B|25|1|26]]|C|$]]|$1|Q|3|R|5|6|7|27|8|@]|9|@]|C|$]]|$1|S|3|T|5|H|7|28|8|@]|9|@]|C|$I|J]]|$1|U|3|V|5|6|7|29|8|@]|9|@]|C|$]]|$1|W|3|X|5|Y|7|2A|8|@]|9|@$A|2B|B|2C|1|2D]]|C|$]]|$1|Z|3|V|5|6|7|2E|8|@]|9|@]|C|$]]|$1|10|3|V|5|6|7|2F|8|@]|9|@]|C|$]]|$1|11|3|X|5|Y|7|2G|8|@]|9|@$A|2H|B|2I|1|2J]]|C|$]]|$1|12|3|V|5|6|7|2K|8|@]|9|@]|C|$]]|$1|13|3|V|5|6|7|2L|8|@]|9|@]|C|$]]|$1|14|3|X|5|Y|7|2M|8|@]|9|@$A|2N|B|2O|1|2P]]|C|$]]|$1|15|3|V|5|6|7|2Q|8|@]|9|@]|C|$]]|$1|16|3|V|5|6|7|2R|8|@]|9|@]|C|$]]|$1|17|3|X|5|Y|7|2S|8|@]|9|@$A|2T|B|2U|1|2V]]|C|$]]|$1|18|3|V|5|6|7|2W|8|@]|9|@]|C|$]]|$1|19|3|-4|5|6|7|2X|8|@]|9|@]|C|$]]]|1A|$1B|$5|1C|1D|1E|C|$1F|1G]]|1H|$5|1C|1D|1E|C|$1F|1I]]|1J|$5|1K|1D|1L|C|$1M|1N|1O|-4]]|1P|$5|1K|1D|1L|C|$1M|1Q|1O|-4]]|1R|$5|1K|1D|1L|C|$1M|1S|1O|-4]]|1T|$5|1K|1D|1L|C|$1M|1U|1O|-4]]]]

Chrome and Opera support <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/ellipse" rel="nofollow noreferrer">ellipse</a> method for canvas 2d context, but IE,Edge,Firefox and Safari don't support it.

We can implement the ellipse method by JS or use a third-party polyfill.

<pre><code>ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)
</code></pre>

Usage example:

<pre><code>ctx.ellipse(20, 21, 10, 10, 0, 0, Math.PI*2, true);
</code></pre>

You can use a <a href="https://github.com/google/canvas-5-polyfill" rel="nofollow noreferrer">canvas-5-polyfill</a> to provide ellipse method.

Or just paste some js code to provide ellipse method:



<pre><code>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();
 }
}
</code></pre>

<img src="https://i.stack.imgur.com/rH9Hx.png" alt="ellipse 1">

<img src="https://i.stack.imgur.com/sBLc6.png" alt="ellipse 2">

<img src="https://i.stack.imgur.com/ueIHD.png" alt="ellipse 3">

<img src="https://i.stack.imgur.com/GNofS.png" alt="ellipse 4">

blocks|key|321054|text|如果你想让椭圆完全适合一个矩形，它实际上是这样的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|321055|function+ellipse(canvasContext,+x,+y,+width,+height){
++var+z+=+canvasContext,+X+=+Math.round(x),+Y+=+Math.round(y),+wd+=+Math.round(width),+ht+=+Math.round(height),+h6+=+Math.round(ht/6);
++var+y2+=+Math.round(Y%2Bht/2),+xw+=+X%2Bwd,+ym+=+Y-h6,+yp+=+Y%2Bht%2Bh6,+cs+=+cards,+c+=+this.card;
++z.beginPath();+z.moveTo(X,+y2);+z.bezierCurveTo(X,+ym,+xw,+ym,+xw,+y2);+z.bezierCurveTo(xw,+yp,+X,+yp,+X,+y2);+z.fill();+z.stroke();
++return+z;
}|code-block|syntax|javascript|321056|确保你的canvasContext.fillStyle+=+'rgba(0,0,0,0)';没有填充这个设计。|offset|length|style|CODE|321057|entityMap^0|0|0|4|16|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

If you want the ellipse to fully fit inside a rectangle, it's really like this:

<pre><code>function ellipse(canvasContext, x, y, width, height){
 var z = canvasContext, X = Math.round(x), Y = Math.round(y), wd = Math.round(width), ht = Math.round(height), h6 = Math.round(ht/6);
 var y2 = Math.round(Y+ht/2), xw = X+wd, ym = Y-h6, yp = Y+ht+h6, cs = cards, c = this.card;
 z.beginPath(); z.moveTo(X, y2); z.bezierCurveTo(X, ym, xw, ym, xw, y2); z.bezierCurveTo(xw, yp, X, yp, X, y2); z.fill(); z.stroke();
 return z;
}
</code></pre>

Make sure your <code>canvasContext.fillStyle = 'rgba(0,0,0,0)';</code> for no fill with this design.

There doesnt seem to be a native function to draw an oval-like shape. Also i am not looking for the egg-shape.

Is it possible to draw an oval with 2 bezier curves?
Somebody expierenced with that?

My purpose is to draw some eyes and actually im just using arcs.
Thanks in advance.

Solution

So scale() changes the scaling for all next shapes.
Save() saves the settings before and restore is used to restore the settings to draw new shapes without scaling.

Thanks to Jani

<pre><code>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();
</code></pre>

How to draw an oval in html5 canvas?

似乎没有本机函数来绘制一个椭圆形形状。此外，我不是在寻找鸡蛋的形状。可以画一个带有两条贝塞尔曲线的椭圆吗？有人用过这个吗？我的目的是画一些眼睛，实际上我只是使用圆弧。提前谢谢。解决方案因此scale()改变了所有下一个形状的缩放比例。Save()保存之前的设置，restore用于恢复设置以绘制不缩放的新形状。感谢Jan...

问如何在html5画布上画一个椭圆？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在html5画布上画一个椭圆？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在html5画布上画一个椭圆？
EN