什么是CanvasRenderingContext2D?
字面解释：Canvas是画布、rendering是渲染、Context是内容 画布渲染是2D效果
ok! CanvasRenderingContext2D 对象提供了一组用来在画布上绘制的图形函数。
绘制矩形
可以使用 strokeRect() 和 fillRect() 来绘制矩形的边框和填充矩形。此外，可以使用 clearRect() 来清除矩形所定义的区域。
语法：strokeRect(x, y, width, height)该方法按照指定的位置和大小绘制一个矩形的边框（但并不填充矩形的内部）。
by
<!DOCTYPE>
<html>
<body>
<Canvas id="jx" width="500" height="500"></canvas>
</body>
<script type="text/javascript">
var cvs=document.getElementById("jx");
var context=cvs.getContext("2d");
context.strokeRect(26, 27, 100, 200);
</script>
</html>
fillRect(x, y, width, height)填充一个矩形。
by
<!DOCTYPE>
<html>
<body>
<Canvas id="jx" width="500" height="500"></canvas>
</body>
<script type="text/javascript">
var cvs=document.getElementById("jx");
var context=cvs.getContext("2d");
context.fillRect(26, 27, 100, 200);
</script>
</html>
clearRect(x, y, width, height)删除一个画布的矩形区域。
by
<!DOCTYPE>
<html>
<body>
<Canvas id="jx" width="500" height="500"></canvas>
</body>
<script type="text/javascript">
var cvs=document.getElementById("jx");
var context=cvs.getContext("2d");
context.clearRect(26, 27, 100, 200);
context.fillRect(26, 27, 100, 200);
</script>
</html>
CanvasRenderingContext2D 对象的属性
canvas 属性
这个环境可以绘制于其上的 Canvas 元素。
fillStyle 属性
用来填充路径的当前的颜色、模式或渐变。这个属性可以设置为一个字符串或者一个 CanvasGradient 对象 或 CanvasPattern 对象。当设置为一个字符串时，它被解析为一个 CSS 颜色值并且用来进行实心填充。当设置为一个 CanvasGradient 或 CanvasPattern 对象，通过使用指定的渐变或模式来完成填充。
globalAlpha 属性
指定在画布上绘制的内容的不透明度。这个值的范围在 0.0（完全透明）和 1.0（完全不透明）之间。默认值为 1.0。
globalCompositeOperation 属性
指定颜色如何与画布上已有的颜色组合（合成）。如需更多细节，请参阅 globalCompositeOperation 属性参考页。
lineCap 属性
指定线条的末端如何绘制。合法的值是 "butt"、"round" 和 "square"。默认值是 "butt"。如需更多细节，请参阅 lineCap 属性参考页。
lineJoin 属性
指定两条线条如何连接。合法的值是 "round"、"bevel" 和 "miter"。默认值是 "miter"。如需更多细节，请参阅 lineJoin 属性参考页。
lineWidth 属性
指定了画笔（绘制线条）操作的线条宽度。默认值是 1.0，并且这个属性必须大于 0.0。较宽的线条在路径上居中，每边有线条宽的一半。
miterLimit 属性
当 lineJoin 属性为 "miter" 的时候，这个属性指定了斜连接长度和线条宽度的最大比率。如需更多细节，请参阅 miterLimit 属性参考页。
shadowBlur 属性
指定羽化阴影的程度。默认值是 0。阴影效果得到 safari 的支持，但是并没有得到 FireFox 1.5 或 Opera 9 的支持。
shadowColor 属性
把阴影的颜色指定为一个 CSS 字符串或 Web 样式字符串，并且可以包含一个 alpha 部分来表示透明度。默认值是 black。阴影效果得到 Safari 的支持，但是并没有得到 FireFox 1.5 或 Opera 9 的支持。
shadowOffsetX, shadowOffsetY 属性
指定阴影的水平偏移和垂直偏移。较大的值使得阴影化的对象似乎漂浮在背景的较高位置上。默认值是 0。阴影效果得到 Safari 的支持，但是并没有得到 FireFox 1.5 或 Opera 9 的支持。
strokeStyle 属性
指定了用于画笔（绘制）路径的颜色、模式和渐变。这个属性可能是一个字符串，或者一个 CanvasGradient 对象 或 CanvasPattern 对象。如果是一个字符串，它被解析为一个 CSS 颜色值，并且画笔用所得的实色来绘制。如果这个属性的值是一个 CanvasGradient 对象或 CanvasPattern 对象，画笔使用这个渐变或模式来实现。
CanvasRenderingContext2D 对象的方法
| 方法 | 描述 |
|---|---|
| arc() | 用一个中心点和半径，为一个画布的当前子路径添加一条弧线。 |
| arcTo() | 使用目标点和一个半径，为当前的子路径添加一条弧线。 |
| beginPath() | 开始一个画布中的一条新路径（或者子路径的一个集合）。 |
| bezierCurveTo() | 为当前的子路径添加一个三次贝塞尔曲线。 |
| clearRect() | 在一个画布的一个矩形区域中清除掉像素。 |
| clip() | 使用当前路径作为连续绘制操作的剪切区域。 |
| closePath() | 如果当前子路径是打开的，就关闭它。 |
| createLinearGradient() | 返回代表线性颜色渐变的一个 CanvasGradient 对象。 |
| createPattern() | 返回代表贴图图像的一个 CanvasPattern 对象。 |
| createRadialGradient() | 返回代表放射颜色渐变的一个 CanvasGradient 对象。 |
| drawImage() | 绘制一幅图像。 |
| fill() | 使用指定颜色、渐变或模式来绘制或填充当前路径的内部。 |
| fillRect() | 绘制或填充一个矩形。 |
| lineTo() | 为当前的子路径添加一条直线线段。 |
| moveTo() | 设置当前位置并开始一条新的子路径。 |
| quadraticCurveTo() | 为当前路径添加一条贝塞尔曲线。 |
| rect() | 为当前路径添加一条矩形子路径。 |
| restore() | 为画布重置为最近保存的图像状态。 |
| rotate() | 旋转画布。 |
| save() | 保存 CanvasRenderingContext2D 对象的属性、剪切区域和变换矩阵。 |
| scale() | 标注画布的用户坐标系统。 |
| stroke() | 沿着当前路径绘制或画一条直线。 |
| strokeRect() | 绘制（但不填充）一个矩形。 |
| translate() | 转换画布的用户坐标系统。 |