h5中的canvas有非常强大的绘图功能

1.渲染上下文

canvas起初是空白的。为了展示，首先脚本要找到渲染上下文，然后在它的上面绘制。<canvas>元素有一个叫做getcontext()的方法，这个方法是用来渲染上下文和它的绘画功能，getContext只有一个参数，上下文的格式。对于2D图像而言，你可以使用CanvasRenderingContext2D.

绘制矩形

canvas提供了三种方法绘制矩形

fillRect(s,y,width,height)

绘制一个填充的矩形

strokeRect(x,y,width,height)

绘制一个矩形的边框

clearRect(x,y,width,height)

清除指定矩形区域，让清除部分完全透明

绘制路径

图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的集合。一个路径，甚至一个子路径，都是闭合的。使用绘制路径绘制图形需要一些额外的步骤。

1.首先，你需要创建路径起始点。

2.然后你使用画图命令去画出路径。

3.之后你把路径封闭。

4.一旦路径生成，你就能通过描边或填充路径区域来渲染图形。

以下是所要用到的函数：

beginPath()

新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径

closePath()

闭合路径之后图形绘制命令又重新指向到上下文中

stroke()

通过线条来绘制图形轮廓

fill()

通过填充路径的内容区域生成实心的图形

移动笔触

一个非常有用的函数，而这个函数实际上兵不能画出任何东西，也是上面所描述的路径列表的一部分，这个函数就是moveTo()。或者你可以想象以下在纸上作业，一直钢笔或者铅笔的笔尖从一个点到另一个点的移动过程。

moveTo(x,y)

将笔触移动到指定的坐标x以及y上。

线

绘制直线，需要用到的方法lineTo(0

lineTo(x,y)

绘制一条从当前位置到指定x以及y位置的直线。

该方法有两个参数：x以及y,代表坐标系中直线结束的点。开始点和之前的绘制路径有关，之前路径的结束点就是接下来的开始点。开始点也可以通过moveTo()函数改变。

注意：路径使用填充(filled)时，路径自动闭合，使用描边(stroked)则不会闭合路径。如果没有添加闭合路径closePath()到描述三角形函数中，则只绘制了两条线段，并不是一个完整的三角形。

圆弧

绘制圆弧或者圆，我们使用arc()方法。当然也可以使用arcTo()，不过这个的实现并不是那么的可靠，所以我们这里不做介绍。

arc(x,y,radius,startAngle,endAngle,anticlockwise)

画一个以(x,y)为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。

arcTo(x1,y1,x2,y2,radius)

根据给定的控制点和半径画一段圆弧，再以直线连接两个控制点。

该方法有五个参数：x,y为绘制圆弧所在圆上的圆心坐标。radius为半径。startAngle以及endAngle参数用弧度定义了开始以及结束的弧度。这些都是以x轴为基准。参考anticlockwise为一个布尔值。为true时，是逆时针方向，否则顺时针方向。

贝塞尔以及二次贝塞尔

一般用来绘制复杂有规律的图形。

quadraticCurveTo(cp1x,cp1y,x,y)

绘制二次贝塞尔曲线，x,y为结束点，cp1x,cp1y为控制点。

bezierCurveTo(cp1x,cp1y,cp2x,cp2Y,x,y)

绘制三次贝塞尔曲线，x,y为结束点，cp1x,cp1y为控制点一，cp2x,cp2y为控制点二。

矩形

同样也有rect(0方法，将一个矩形路径增加到当前路径上。

rect(x,y,width,height)

绘制一个左上角坐标为(x,y),高度为width以及height的矩形。

当该方法执行的时候，moveTo(0方法自动设置坐标参数(0,0)。也就是说，当前笔触自动重置为默认坐标。

Path2D对象

为了简化代码和提高性能，Path2D对象已可以在较新版本的浏览器中使用，用来缓存或记录绘画命令，这样你将能快速的回顾路径。

Path2D()

所有的路径方法比如moveTo,rext,arc或quadraticCurveTo()等，如我们前面见过的，都可以在Path2D中使用。

Path2D API中添加了addPath作为将path结合起来的方法。当你想要从几个元素中来创建对象时，这将会很实用。

比如：

Path2D.addPath(path,[,trnasform])

添加一条路径到当前路径（可能添加了一个变换矩形）。

使用SVG paths

新的Path2D API有另一个强大的特点，就是使用SVG path data来初始化canvas上的路径。这将使你获取路径时可以以SVG或canvas的方式来重用它们。

如 var p=new Path2D("M10 10 h 80 v 80 h -80 Z");

这条路径将先移动到点（M10 10)然后再水平移动80个单位（h,80)，然后下移80个单位（v,80)，接着左移80个单位(h-80)，再回到起点处(z)。

色彩 Colors

如果我们想给图形上色，有两个重要的属性可以做到:

fillStyle =color

设置图形的填充颜色

strokeStyle=color

设置图形轮廓的颜色

color可以是表示CSS颜色值的字符串，渐变对象或者团对象。在默认情况下，线条和填充颜色都是黑色(CSS 颜色值 #000000）。

注意：一旦您设置了strokeStyle或者fillStyle的值，那么这个新值就会成为新绘制的图形的默认值。如果你要给每个图形上不同的颜色，你需要重新设置fillStyle或strokeStyle的值。

透明度

除了可以绘制实色图形，我们还可以用canvas来绘制半透明的图形。通过设置globalAlpha属性或者使用一个半透明颜色作为轮廓或填充的样式。这个属性值影响到canvas里所有图形的透明度，有效值的范围是0.0（完全透明）到1.0（完全不透明），默认是1.0.

rgba()示例

该例是画矩形。这里我们可以看出，rgba()可以分别设置轮廓和填充样式，因而具有更好的操作性和使用弹性。

ctx ctxctxctxctxctxctxctxctxiiictxijjjctxij

线性Line Styles

可以通过一系列属性来设置线的样式

lineWidth=value

lineCap=type

lineJoin=type

miterLimit=value

lineWidth属性的例子

这个属性设置当前绘线的粗细。属性值必须为正数。默认值是1.0。

线宽是指给定路径的中心到两边的粗细。换句话说就是在路径的两边各绘制线宽的一半。因为画布的坐标并不和像素直接对应，当需要获得精确的水平或垂直线的时候要特别注意。