一、甚么是canvas
1.canvas概要
canvas：HTML5 <canvas> 原素用作绘图的绘出，透过JAVA (一般来说是JavaScript)来顺利完成，<canvas> 条码而已绘图罐子，能透过多种方式采用 canvas 绘出方向、盒、圆、字符串和加进影像。
2.应用程序全力支持
全力支持 <canvas>原素的第二个应用程序版二、canvas的基本上用语
1.建立两个画笔（Canvas）
明确规定原素的 id、长度和度（预设情况下 <canvas> 原素没前面板和文本。）：
<canvas id=”myCanvas” width=”200″ height=”100″></canvas>
2.向<canvas>原素上绘图
在HTML网页上定义canvas原素后，它而已一张空白的画笔，为了向canvas上绘图，必须经过三步：
调用Canvas对象的getContext()方式，返回两个CanvasRenderingContext2D对象。调用CanvasRenderingContext2D对象的方式绘图。3.绘图代码模板示例
代码
运行结果三、绘图
3.1 绘出矩形
<canvas>只全力支持一种原生的绘图绘出：矩形。所有其他绘图都至少需要生成一种方向 (path)，当canvas根据path绘出时，能绘出出任意形状。
canvast 提供了两种方式绘出矩形：
1、fillRect(x, y, width, height)：绘出两个填充的矩形。2、strokeRect(x, y, width, height)：绘出两个矩形的前面板。
代码如下：
绘出矩形
运行结果3.2 点线模式
绘出线段或前面板时预设总是采用实线，如果希望采用点线进行绘出，可透过设置CanvasRenderingContext2D的setLineDash方式和lineDashOffset属性实现。例如：lineDashOffset=3，lineDash=【5,3,1,2】；代表长为5的实线、距离为3的间距、长为1的实线、距离为2的间距…这种点线模式。但开始绘出时只绘出长度为2的实线，因为lineDashOffset为3就是控制该点线‘移过’3个点。
代码3.3 绘出字符串串
canvas 提供了两种方式来绘出字符串串:
1.fillText(text, x, y [, maxWidth])：在指定的 (x,y) 位置填充指定的文本，绘出的最大长度是可选的。
2.strokeText(text, x, y [, maxWidth])：在指定的 (x,y) 位置绘出文本前面板，绘出的最大长度是可选的。
代码
运行结果3.4 设置阴影
canvas为设置绘图阴影提供了如下属性：
shadowBlur：设置阴影的模糊度shadowOffsetX：阴影在X方向的偏移shadowOffsetY：阴影在Y方向的偏移
代码
运行3.5 绘出方向
在canvas上采用方向，可按如下步骤进行：
1.调用CanvasRenderingContext2D对象的beginPath（）方式开始定义方向；
2.调用CanvasRenderingContext2D对象的各种方式加进子方向；
3.调用CanvasRenderingContext2D对象的closePath（）方式关闭方向
4.调用CanvasRenderingContext2D对象的fill（）或stroke（）方式来填充方向或绘出方向前面板。
代码
运行3.6 绘出曲线
绘出二次贝塞尔曲线:
quadraticCurveTo(cp1x, cp1y, x, y)
说明：参数 1 和 2：控制点坐标参数 3 和 4：结束点坐标
二次贝塞尔曲线绘出三次贝塞尔曲线:
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
说明：参数 1 和 2：控制点 1 的坐标参数 3 和 4：控制点 2 的坐标参数 5 和 6：结束点的坐标
三次贝塞尔曲线
曲线应用
运行结果3.7 绘出位图
CanvasRenderingContext2D为绘出位图提供了3个方式：
1：drawImage(image, x, y)：绘出出图片原图来的大小，不对图片做缩放处理，绘出到（x，y）处；
2：drawImage(image, x, y, width, height)：这个方式多了 2 个参数：width 和height，这两个参数用来控制 当像 canvas 画入时应该缩放的大小。
3：drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)：第二个参数和其它的是相同的，都是两个影像或者另两个 canvas 的引用。其他 8 个参数：前 4 个是定义影像源的切片位置和大小，后 4 个则是定义切片的目标显示位置和大小。
