【html5】 canvas小结

canvas小结

1). 默认情况下 <canvas> 元素没有边框和内容。

2). 标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小。

3). 你可以在HTML页面中使用多个 <canvas> 元素.

4). getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

5).canvas拥有坐标，是一个二维网格，左上角坐标为其原点(0,0)。

6)线条及其线条常用方法属性

     moveTo(x,y) 定义线条开始坐标

     lineTo(x,y) 定义线条结束坐标

     stroke(),fill() 方法来绘制线条，基于当前的状态绘制

     beginPath()进行一次全新的路径绘制,不会将没有修改的属性变成默认值。

     closePath()方法和beginPath()方法一起使用，以绘制闭合的路径图形，这是绘制封闭多边形的标准做法。而且使用context.closePath()方法，最后一条线的绘制可以省略，它会自动帮我们连接到绘制起点以形成封闭的多边形。

     fillStyle 和 strokeStyle 属性的颜色值可以是CSS3支持的任何一种形式：

#ffffff
#333
red
rgb(0,0,0)
rgba(255,0,0,0.5)
hsl(20,50%,50%)
hsla(20,50%,60%,0.6)

 

lineCap属性就是定义线段开头和结尾处的形状，此属性有三个属性值：butt（默认值），round，square 。

使用round属性值会比默认值butt多出一个半圆的形状包在线段的开始和结尾处，而是用square属性值会在开始和结尾处多处半个方形，这就是它们的不同之处。其中，round对于我们绘制一些圆角效果的图形比较有用，但是它只对线条的开头和结尾处有效果，对于线段之间的连接处没有作用，这点需要注意。

                                                                                                               

lineJoin顾名思义就是线条与线条之间的连接方式，该属性有三个属性值：miter（默认值，尖角），bevel（衔接），round（圆角）。

miterLimit属性，这个属性只有当lineJoin属性值是miter时才有用，默认值是10 。