超神的 canvas

canvas的定义： 

　　HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

　　画布是一个矩形区域，您可以控制其每一像素。

　　canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

canvas的特点： 

　　canvas，又称画布，但是用canvas这个画布作画的工具是“代码”，而在画布上创建的东西实质上是不存在的，在代码中找不到任何东西；

　　canvas的宽高只能通过属性的方法设置，不能通过行内，或其他方法设置，否则设置的宽高会出现问题。

　　要想“作画”，首先要通过操作DOM得到canvas的节点然后通过节点操作getContext('2d')，并存入一个变量（如以下代码）；

　　

canvas的作用：（x，y分别代表x，y坐标，width代表宽度，height代表高度，color代表颜色，r代表半径，P代表Math.PI代表π=3.1415926……,l代表弧度）

　　一、创建矩形

　　　　①.ctx.fillRect(x,y,width,height)  or   ctx.rect(x,y,width,height) ; ctx.fill() ;——创建一个填充矩形

　　　　　　ctx.fillStyle = "color";——设置填充颜色

　　　　②.ctx.strokeRect(x,y,width,height)  or   ctx.rect(x,y,width,height) ; ctx.stroke() ;——创建一个填充矩形
　　　　　　ctx.strokeStyle = "color";——设置边框颜色

　　　　③.ctx.beginPath(); ——排除其他影响（fillRect，strokeRect 自带ctx.beginPath()）；

　　二、创建圆形
　　　　ctx.arc(x,y,r,l,2*π)； ctx.fill() or ctx.stroke()；——填充圆 or  线性圆

　　三、创建线段

　　　　①.ctx.moveTo(x,y)——线段起点；

　　　　②.ctx.lineTo(x,y)——线段终点；（可以有多个）

　　　　③.ctx.lineJoin =  

　　　　　　"round"     圆角

　　　　　　"miter"      尖角

　　　　　　"bevel"     斜角

　　　　④.ctx.closePath()——关闭缺口；

　　　　⑤.ctx.linecap()——使线段的两端变圆；

　　　　⑥.ctx.lineCap = 

　　　　　　"butt"           使线段两端变尖
　　　　　　"square"      补全

　　四、创建文字

　　　　①.ctx.fillText("文字或字符串",x,y)   or  ctx.strokeText("文字或字符串",x,y); ——填充文字 或 线性文字

　　　　②.ctx.textAlign = ——左右对齐

　　　　　　"center"                 居中，以文字的中间为参考点  

　　　　　　"left"                      居左，以左下角为参考点
　　　　　　"right" "end"          居右，以右下角为参考点

　　　　③.ctx.textBaseline —— 上下对齐

　　　　　　"top"                      居上，以文字的左上角为参考点  

　　　　　　"middle"                居中，以左中间为参考点
　　　　　　"bottom"                居下，以左下角为参考点

　　　　④.ctx.font =                设置字体样式