HTML DOM getContext() 方法：
getContext() 方法返回一个用于在画布上绘图的环境。
Canvas.getContext(contextID)
参数 contextID 指定了您想要在画布上绘制的类型。当前唯一的合法值是 "2d"，它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图 API。
fillStyle 属性
fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式。
context.fillStyle=color|gradient|pattern;
| color | 指示绘图填充色的 CSS 颜色值。默认值是 #000000。 |
| gradient | 用于填充绘图的渐变对象（线性或放射性） |
| pattern | 用于填充绘图的 pattern 对象 |
fillRect() 方法
fillRect() 方法绘制“已填色”的矩形。默认的填充颜色是黑色。
context.fillRect(x,y,width,height);
| x | 矩形左上角的 x 坐标 |
| y | 矩形左上角的 y 坐标 |
| width | 矩形的宽度，以像素计 |
| height | 矩形的高度，以像素计 |
rotate() 方法旋转当前的绘图。 JavaScript 语法： context.rotate(angle); 参数值 参数 描述 angle 旋转角度，以弧度计。 如需将角度转换为弧度，请使用 degrees*Math.PI/180 公式进行计算。 举例：如需旋转 5 度，可规定下面的公式：5*Math.PI/180。