您的位置:首页 - 教程 - HTML5 - 正文
用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用于指定矩形的宽和高。这对于有基础的同学,还是非常简单的。


绘制路径 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 (新的坐标位置)作为参数。

评论: