一. 栅格(grid)和坐标空间

​ 如下图所示，canvas元素默认被网格所覆盖。通常来说网格中的一个单元相当于canvas元素中的一像素。栅格的起点为左上角（坐标为（0,0））。所有元素的位置都相对于原点来定位。所以图中蓝色方形左上角的坐标为距离左边（X轴）x像素，距离上边（Y轴）y像素（坐标为（x,y））。

​ 后面我们会涉及到坐标原点的平移、网格的旋转以及缩放等。

二. 绘制矩形

​ <canvas> 只支持一种原生的 图形绘制：矩形。所有其他图形都至少需要生成一种路径(path)。不过，我们拥有众多路径生成的方法让复杂图形的绘制成为了可能。

canvas 提供了三种方法绘制矩形：

1. fillRect(x, y, width, height)

   绘制一个填充的矩形

2. strockRect(x, y, width, height)

   绘制一个矩形的边框

3. clearRect(x, y, widh, height)

   清除指定的矩形区域，然后这块区域会变的完全透明。

说明：

​ 这3个方法具有相同的参数。

​ x, y：指的是矩形的左上角的坐标。(相对于canvas的坐标原点)

​ width, height：指的是绘制的矩形的宽和高。

function draw(){
    var canvas = document.getElementById('tutorial');
    if(!canvas.getContext) return;
    var ctx = canvas.getContext("2d");
    ctx.fillRect(10, 10, 100, 50);  //绘制矩形,填充的默认颜色为黑色
    ctx.strokeRect(10, 70, 100, 50);  //绘制矩形边框

}
draw();

ctx.clearRect(15, 15, 50, 25);