Comment: Drawing ellips in Canvas is a very common requirement, but most browsers have not implemented this method yet, so they often use arc or arcTo method to combine scale deformation to draw ellips. Interested friends can learn about it, hoping it can help you.
Drawing ellips in Canvas is a very common requirement. The new HTML Canvas 2D ContextW3C draft has added an ellipse method to draw ellips, but most browsers have not implemented this method yet, so it is necessary to use arc or arcTo method combined with scale deformation to draw ellips.
Sample code:
<canvas></canvas>
<script>
var ctx = documentquerySelector('canvas')getContext('2d');
ctxlineWidth = "10";
ctxscale(1,2);
ctxarc(150,150,100,0,MathPI*2,false);
ctxstroke();
</script>
It's a bit wrong, because the lines are uneven in thickness, and the stroke is also affected by scale.
To fix this problem, we need a little trick.
Sample code:
[code]
<canvas></canvas>
<script>
var ctx = documentquerySelector('canvas')getContext('2d');
ctxlineWidth = "10";
ctxsave();
ctxscale(1,2);
ctxarc(150,150,100,0,MathPI*2,false);
ctxrestore();
ctxstroke();
</script>
[/code]
Now even, perfect.
The trick is to save the canvas state first, then scale and call the path command, then restore the canvas state, and then draw it out.
The key point is to save first and then zoom, restore first and then stroke.