如下图，可以这样理解，canvas元素默认被网格所覆盖。常日来说网格中的一个单元相称于canvas元素中的一像素。以左上角为出发点(0,0)，向右为x坐标，向下为y坐标。所有元素的位置都相对付原点来定位。以是图中矩形左上角的坐标为对应x轴的长度x像素，y轴的长度y像素，坐标就为（x,y）。
2 绘前准备
2.1 获取画布工具
<canvas>只是HTML的元素，我们要在JavaScript中操作画布，我们就要获取画布工具
//获取画布工具var canvas=document.getElementById('canvas');
2.2 获取绘画高下文工具context
有了画布工具之后，我们要利用 getContext() 获取 canvas 的高下文环境，参数传2d。
//获取绘画高下文工具var context=canvas.getContext('2d');
2.3 2种创建图形办法
context.fill()：添补，默认玄色，颜色用fillStyle来设置
context.stroke()：绘制路径，默认玄色。颜色用strokeStyle来设置。
3 绘制矩形canvas供应矩形绘制的原生API，紧张有三个
（1）绘制一个添补的矩形
fillRect(x, y, width, height)
（2）绘制一个矩形的边框
strokeRect(x, y, width, height)
（3）打消指定的矩形区域，然后这块区域会变的完备透明。
clearRect(x, y, widh, height)
参数解释：
x：矩形左上角的 x 坐标
y：矩形左上角的 y 坐标
width：矩形的宽度，以像素计
height矩形的高度，以像素计
代码参考：
<html><head></head><body><canvas id=\"大众canvas\"大众 width=\"大众400\"大众 height=\"大众400\"大众></canvas><script type=\"大众text/javascript\"大众>//获取画布工具var canvas=document.getElementById('canvas');//获取绘画高下文工具var context=canvas.getContext('2d');//绘制一个添补的矩形context.fillRect(20, 20, 200, 50);//绘制一个矩形的边框context.strokeRect(20, 90, 200, 50);//打消矩形区域context.fillRect(20, 160, 200, 60)context.clearRect(30, 170, 180, 40)</script></body></html>
本章紧张讲解canvas的绘图根本，矩形绘制只是一个开始，后面会有更多的图形绘制。
