简单图形,整套的属性和方法专门用于绘制矩形:
1、fillStyle可以设置为CSS颜色、一个图案或一种颜色渐变。fillStyle默认是纯黑色,你可以设置成你喜欢的任意颜色。只要页面打开着,每个绘图上下文都会记录自己的属性,除非你重置过它。
2、fillRect(x,y,width,height)绘制一个矩形,并以当前的fillStyle来填充。
3、srtokeStyle和fillStyle一样,可以设置为CSS颜色、一个图案或一种颜色渐变。
4、strokeRect(x,y,width,height)使用当前的storke style来绘制一个矩形,strokeRect并不填充中间区域,而只绘制矩形的边缘。
5、clearRect(x,y,width,height)清除指定矩形区域的像素。
路径
按照惯例,不论开始绘制何种图形,第一个需要调用的就是beginPath。这个简单的函数不带任何参数,它用来通知canvas将要开始绘制一个新的图形了。对于canvas来说,beginPath函数最大的用处是canvas需要据此来计算图形的内部和外部的范围,以便完成后续的描边和填充。
路径会跟踪当前坐标,默认值是原点。canvas本身也跟踪当前坐标,不过可能通过绘制代码来修改。
每一个canvas都有一个路径,定义路径就如同用铅笔作画。你可以任意作地画,但它不一定是最终作品的一部分,直到你拿起画笔沾上墨水描绘这条路径。
moveTo(x,y):不绘制,只是将当前位置移动到新目标坐标(x,y),并作为线条开始点。
lineTo(x,y):绘制线条到指定的目标坐标(x,y),并且在两个坐标之间画一条直线。不管调用它们哪一个,都不会真正画出图形,因为我们还没有主,调用stroke(绘制)和fil(填充)函数。当前,只是在定义路径的位置,以便后面绘制时使用。
closePath(),这个函数跟lineTo很像,唯一的差别在于closePath会将路径的起始坐标自动作为目标坐标。closePath还会通知canvas当前绘制的图形已经闭合或者形成了完全封闭的区域。起连接起点,闭合路径的作用。