html5 canvas 基本用法

首先来详细介绍矩形的绘制吧，矩形有三个函数可以绘制的：

fillRect(x,y,width,height) : Draws a filled rectangle
strokeRect(x,y,width,height) : Draws a rectangular outline
clearRect(x,y,width,height) : Clears the specified area and makes it fully transparent

        上面的函数都接受四个参数，X和Y用于指定矩形左上角也就是相对于原点的位置，width和height用于指定矩形的宽和高。这对于有基础的同学，还是非常简单的。下面，我们使用HTML5 canvas 元素详细教程一里提供的 draw() 函数，我们添加了上面的三个函数。

绘制矩形的例子 Rectangular shape example

        运行的结果应该和右边图形一模一样的。fillRect 函数画了100x100黑色矩形，clearRect 函数清空了中间 60x60 大小的方块，然后strokeRect 函数又在清空了的空间画出了一个 50x50 的矩形边框。。

绘制路径 Drawing paths

        绘制路径不像绘制矩形那要，需要一些额外的步骤，下面是需要使用的函数和步骤：

beginPath()
closePath()
stroke()
fill()

        第一步：用 beginPath 创建路径。在在内存中，径路是以一组子路径（直线，弧线等）的形式储存的，它们共同构成一个图形。每次调用 beginPath，子路径组都会被重置，然后可以绘制新的图形。

        第二步：是实际绘制路径的部分，很快我们就会看到。

        第三步：调用 closePath 方法，它会尝试用直线连接当前端点与起始端点来关闭路径，但如果图形已经关闭或者只有一个点，它会什么都不做。这一步不是必须的。

        第四部：也就是最后一步，调用 stroke或 fill 方法，这时，图形才是实际的绘制到 canvas上去。stroke是绘制图形的边框，fill会用填充出一个实心图形。当调用 fill 时，开放的路径会自动闭合，而无须调用 closePath ，这需要大家注意。

画一个简单图形（如三角形）的代码如下。

ctx.beginPath();
ctx.moveTo(75,50);
ctx.lineTo(100,75);
ctx.lineTo(100,25);
ctx.fill();
 

        moveTo 是一个十分有用的方法，它是绘制路径的实用方法的一部分。你可以把它想象成是把笔提起，并从一个点移动到另一个点的过程。

moveTo(x, y)

        它接受 x 和 y （新的坐标位置）作为参数。