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 = 设置字体样式