本节书摘来自华章计算机《html5 canvas游戏开发实战》一书中的第2章，第2.1节,作者：张路斌著， 更多章节内容可以访问云栖社区“华章计算机”公众号查看。
所谓基本图形，就是指线、矩形、圆等最简单的图形，任何复杂的图形都是由这些简单的图形组合而成的。我们首先来了解一下这些简单图形的绘制方法。
2.1.1 画线
你可能是第一次接触canvas绘图。首先，我们通过绘制一个简单的直线来学习canvas的功能。其代码如代码清单2-1所示。
代码清单 2-1
运行后的效果图如图2-1所示。
下面来解释一下代码清单2-1中的代码。
这是在html中嵌入canvas标签。canvas标签内部可以添加文字或html代码，如果浏览不支持canvas标签，那么浏览器会自动跳过canvas标签而运行canvas内部的html代码。
以上代码是获取html中的canvas标签。
这里返回一个用来绘制环境类型的环境。它返回的是一个 canvasrenderingcontext2d 对象，该对象实现了一个画布所使用的大多数方法。目前，canvas只支持二维环境，所以参数只能是“2d”。当然，将来也可能会支持三维。
以上代码用来设置线条宽度。
此处设置画笔颜色为红色，这里的颜色值可以是英文字母，也可以直接使用颜色的rgb值，如红色为“#ff0000”，黑色为rgb(0,0,0)等。
以上代码创建一个新的路径。
以上代码将画笔光标位置移动到坐标(10,10)处。
以上代码从当前坐标开始移动画笔到坐标(150,50)处，绘制一条直线。
上面代码表示开始绘制定义好的路径。
以上过程其实和我们在纸上画一条线是同样的道理，首先我们要选择一种颜色及线条的粗细，然后用画笔从一个点开始画到另一个点，这样就可以画出一条线了。
在画线的时候，也可以使用linecap来定义线帽的样式，如在代码清单2-2中，分别使用了linecap的3种样式。
代码清单 2-2
运行代码，可以看到3种不同的线帽，如图2-2所示。
2.1.2 画矩形
下面来看看如何画一个矩形，其代码如代码清单2-3所示。
代码清单 2-3
运行效果如图2-3所示。
在canvas里，用strokerect函数来绘制一个矩形，它需要4个参数，分别是：起点坐标x和坐标y、矩形长、矩形宽。
也可以用下面代码来替换strokerect函数，它可以实现同样的功能。
如果要绘制一个实心的矩形，可以用fillrect函数，如代码清单2-4所示。
代码清单 2-4
运行效果如图2-4所示。
fillrect函数同样需要4个参数，分别是：起点的坐标x和坐标y、矩形长、矩形宽。与strokerect函数不同的是，画实心图形的时候，用fillstyle来定义图形的颜色。
当然，这里也可用另一种实现方法绘制矩形，代码如下：
2.1.3 画圆
圆其实就是一个360度的圆弧。在canvas中，可使用arc函数来画一个圆弧。先看代码清单2-5所示代码。
代码清单 2-5
运行效果如图2-5所示。
arc函数的6个参数分别是：圆弧中心的坐标x和坐标y、圆弧半径、起始角度、终止角度、是否逆时针。需要解释的是，第4个和第5个参数需要传入的是圆弧的弧度，如要画30度的角，需要将其转化成弧度30*math.pi/180；第6个参数用来控制圆弧是顺时针旋转还是逆时针旋转。
和画矩形一样，同样可以用fill函数来画一个实心的圆弧，如代码清单2-6所示。
代码清单 2-6
运行效果如图2-6所示。
画圆时，只需要让起始角度和终止角度之差为360度即可，具体代码如代码清单2-7所示。
代码清单 2-7
运行效果如图2-7所示。
2.1.4 画圆角矩形
canvas中没有直接画圆角矩形的api，但是我们可以用arcto函数来完成圆角的绘制，然后结合直线绘制，就可以完成圆角矩形的绘制了。在绘制圆角矩形之前，我们先来绘制一个圆角，如代码清单2-8所示。
代码清单 2-8
运行效果如图2-8所示。
在代码清单2-8中，arcto函数是用来为当前的子路径添加一条圆弧的，它需要5个参数，分别是：点p1的坐标x和坐标y、点p2的坐标x和坐标y、圆弧的半径radius。该圆弧有一个点与当前位置到 p1 的线段相切，还有一个点和从 p1 到 p2 的线段相切。这两个切点就是圆弧的起点和终点，圆弧绘制的方向就是连接这两个点的最短圆弧的方向。
在很多常见的应用中，圆弧开始于当前位置而结束于 p2，但情况并不总是这样。如果当前的位置和圆弧的起点不同，这个方法将会添加一条从当前位置到圆弧起点的直线，而且总是将当前位置设置为圆弧的终点。
有了对arcto函数的了解，画圆角矩形就简单多了，如代码清单2-9所示。
代码清单 2-9
运行效果如图2-9所示。
2.1.5 擦除canvas画板
擦除canvas画板上的内容需要用到clearrect函数，此函数可以擦除一个矩形区域。它需要4个参数：起点的坐标x和坐标y，擦除区域的长和宽。其用法如代码清单2-10所示。
代码清单 2-10
上面的代码先绘制了一个红色的实心矩形，然后在红色矩形中间擦除了一个50×50的小矩形，效果如图2-10所示。