HTML5 Canvas 起步(2) - 路径（2）

2. 移动与直线 moveTo, lineTo, rect

<canvas id="canvas" width="500" height="500"></canvas><script type="text/javascript">    var canvas = document.getElementById("canvas");    var ctx = canvas.getContext("2d");    ctx.beginPath();    ctx.moveTo(10, 10);    ctx.lineTo(110,110);    ctx.lineTo(10, 110);    ctx.lineTo(10, 10);    ctx.stroke();    ctx.beginPath();    ctx.rect(120, 10, 100, 100);    ctx.stroke();</script>

void moveTo(in float x, in float y);

在 Canvas 中绘制路径，一般是不需要指定起点的，默认的起点就是上一次绘制路径的终点，因此，如果需要指定起点的话，就需要使用 moveTo 方法来指定要移动到的位置。

void lineTo(in float x, in float y);

lineTo 方法则是绘制一条直接路径到指定的位置。在调用完 lineTo 方法后，Context 内部的绘制起点会移动到直线的终点。

void rect(in float x, in float y, in float w, in float h);

rect 方法用来绘制一个矩形路径，通过参数指定左上角位置以及宽和高。在调用 rect 后，Context 的绘制起点会移动到 rect 绘制的矩形的左上角。

rect 方法与后面要介绍的 arc 方法与其他路径方法有一点不同，它们是使用参数指定起点的，而不是使用 Context 内部维护的起点。