html5 canvas里绘制椭圆并保持线条粗细均匀的技巧

在Canvas中绘制椭圆是一项常见任务。尽管HTML Canvas 2D Context的W3C草案中新增了专门用于绘制椭圆的ellipse方法，但遗憾的是，目前大多数浏览器都还未实现这一功能。我们需要借助arc或arcTo方法，并结合scale变形来实现椭圆的绘制。

下面是一个示例代码，展示了如何在Canvas中使用这些方法绘制椭圆：

```html

```

这段代码的关键在于使用save方法保存当前画布状态，然后进行必要的变形操作，接着绘制路径，最后使用restore方法恢复之前的画布状态。这样做能够确保绘制的椭圆线条粗细均匀，且不受缩放影响。如果不使用save和restore方法，直接进行变形和绘制操作，可能会导致线条粗细不均匀的问题。正确的顺序是先save保存状态，然后进行缩放和绘制路径，再restore恢复状态，最后stroke进行绘制。这样绘制的椭圆才会完美且线条均匀。