html5 Canvas画图教程(9)—canvas中画出矩形和圆形

将介绍在Canvas中绘制矩形和圆形的基础操作。作为基础图形的重要组成部分，矩形和圆形的绘制是Canvas图形编程的基石。

Canvas绘制矩形

在Canvas中绘制矩形，我们主要使用`fillRect`和`strokeRect`方法。这两个方法的参数相同，分别是矩形的起始x坐标、起始y坐标、宽度和高度。它们可以直接填充或描边出一个矩形，样式由当前设置决定。

但如果你既想填充又想描边一个矩形，单独使用`fillRect`和`strokeRect`就会显得累赘。我们可以使用`rect`方法。它画出的只是路径，填充或描边的操作需要后续完成。这样，我们就可以避免每次填充或描边时都使用`fillRect`和`strokeRec`，特别是在需要一次性绘制大量路径的情况下。

虽然可以使用`lineTo`方法画出矩形，但这并不必要且稍显复杂。

Canvas绘制圆形

相对于矩形的绘制，Canvas中没有直接的函数来绘制一个完美的圆形。实际上，我们使用`arc`方法来绘制的是一个360度的圆弧，它在视觉上呈现为一个圆形。使用`arc`方法时，我们需要指定圆心的坐标、半径以及起始和终止角度。

值得注意的是，圆形的位置判断与矩形不同。矩形的位置通常通过左上角坐标来确定，而圆形的位置则通过圆心坐标来确定。如果你想在画布上水平和垂直居中对齐圆形和矩形，那么你需要记住：圆形的圆心坐标应该是矩形坐标加上矩形的一半宽度和高度。

虽然`arc`方法没有直接绘制圆形的函数那么方便——我们设想的直接画圆的方法只需要三个参数，即圆心坐标和半径——但`arc`的功能更强大，它不仅可以画圆，还可以画半圆等其他形状。

至于椭圆形的绘制，由于Canvas中没有直接的函数来绘制椭圆，我们需要使用其他方法来模拟。这个操作相对复杂，将在后续的文章中详细讲解。

虽然Canvas提供了一些直接绘制矩形和圆形的函数，但我们仍然需要理解其工作原理并灵活应用，以满足更复杂的绘图需求。通过学习和实践，我们可以掌握这些基础图形的绘制方法，为更高级的Canvas图形编程打下坚实的基础。