1、canvas 画布 - 基础
<canvas> 画布是 HTML5 新增的元素，用于图形的绘制，通过 <canvas> 标签来创建。
2、画布添加好了之后，因为它没有颜色，所以我们还可以通过CSS 样式设置画布的背景颜?。
#myCanvas {
background-color: #eee;
}
3、在 <canvas> 中绘制图形，必须先要拿到<canvas> 的上下文。就是在画图前要先拿到画
笔。这个上下文，就相当于是一个画笔。
画布元素.getContext("2d")
4、绘制矩形的方法
<canvas> 的上下文提供了四种方法绘制矩形：
绘制一个填充的矩形（填充色默认为黑色）
fillRect(x, y, width, height)
绘制一个矩形的边框（边框样式默认为 1px 的黑色实线）
strokeRect(x, y, width, height)
绘制一个既没填充也没边框的矩形
rect(x, y, width, height)
清除指定矩形区域，让清除部分完全透明（类似于橡皮擦功能）
clearRect(x, y, width, height)
注：
x 和 y ：指定了在<canvas> 画布上所绘制矩形的起点（左上?）坐标。
width 和 height ：设置矩形的宽高尺寸（存在边框的话）
5、清空画布
ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
说明：起始位置为画布的 (0, 0) 点，清除范围的尺寸为画布效果。
6、添加样式
fillStyle ：设置图形的填充颜色。
strokeStyle ：设置图形的轮廓颜色。
ineWidth ：设置当前绘制线的粗细（属性值必须是正数）。
lineJoin ：设置线条与线条间交接处的样式（默认值为miter ）。
round ：圆?
bevel ：斜?
miter ：直?
7、绘制路径
绘制路径起点。
绘制路径终点。
连接两点绘制出线段。
绘制路径的方法
moveTo(x, y) ：设置路径的起点坐标 (x, y) 。
lineTo(x, y) ：设置路径的终点坐标 (x, y) 。
stroke() ：连接两个点，绘制路径。
8、添加样式
lineCap ：设置每一条线段两端的样式。
butt ：线段两端以方形结束。
round ：线段两端以圆形结束。
square ：线段两端以方形结束。但是增加了一个宽度与线段相同，高度是线段宽度一半的矩形。
9、路径来绘制。
创建图形的起始点。
绘制路径的其他点。
将路径闭合。
一旦路径生成，就能通过描边或填充路径区域来渲染图形。
closePath() ：<canvas> 的上下文提供了一个方法来达到闭合路径的效果。
10、填充图形
fill() ：通过填充路径的内容区域生成实心的图形。
closePath() ：<canvas> 提供了一个方法来达到闭合路径的效果。