一、坐标系
其实只要玩过一点点图形编程的人都知道，电脑上的坐标系和数学上的坐标系稍微有点不同，坐标的原点在绘制区域（这里是Canvas）的左上角，X轴正向朝右，Y轴正向朝下，如下图
声明：为本文为原创文章，作者保留所有权利！欢迎转载，转载请注明作者左洸和出处博客园
二、Stroke 和 Fill
HTML5中将图形分为两大类：
第一类称作 Stroke，我的理解就是轮廓、勾勒或者线条，总之，图形是由线条组成的；
第二类称作 Fill，就是填充区域
上下文对象中有两个绘制矩形的方法，可以让我们很好的理解这两大类图形的区别：
一个是 strokeRect，还有一个是 fillRect
下面的代码分别用这两个方法来绘制矩形，你可以分别点击两个按钮来看看有什么不同，从而理解 stroke 和 fill 的区别
设置画布
你的浏览器不支持 <canvas>标签，请使用 Chrome 浏览器 或者 FireFox 浏览器
三、颜色
上下文对象有两个属性可以用来设置颜色：strokeStyle 和 fillStyle
strokeStyle 的值决定了你当前要绘制的线条的颜色
fillStyle 的值决定了你当前要填充的区域的颜色
颜色值应该是符合CSS3 颜色值标准的有效字符串。下面的例子都表示同一种颜色。
关于颜色，以后会有更多的说明。
四、基本绘图
除了上面给出的两个绘制矩形的方法外，上下文对象还有几个方法可以用来绘制一些基本图形，如下：
moveTo(x,y)：moveTo方法并不能画出任何东西，它只是将画笔的当前点移动到(x,y)处
lineTo(x,y)：从当前点到（x,y）点绘制一条直线。注意：绘制完成后，当前点就变成了(x,y)，除非你用 moveTo 方法去改变他
arc(x, y, radius, startAngle, endAngle, anticlockwise) ：绘制一条弧线
quadraticCurveTo(cp1x, cp1y, x, y)
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) ：这两个方法都是绘制贝叶斯曲线，具体用法看参考手册
rect(x, y, width, height) ：绘制一个矩形。注意： 当它被调用时，moveTo 方法会自动被调用，参数为(0,0)，于是起始坐标又恢复成初始原点了。
有了直线、弧线、曲线、方形和圆形这几种基本图形，我们就可以组合出更复杂的图形了
五、理解绘制路