HTML5 Canvas
HTML5 <canvas> 标签定义图形，比如图表和其他图像，必须使用脚本来绘制图形。<canvas> 是 HTML 5 中的新标签。
<canvas> 元素本身并没有绘制能力，它仅仅是图形的容器/画布，必须使用脚本(JavaScript)来完成实际的绘图任务。
getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。 getContext("2d") 对象属性和方法，可用于在画布上绘制文本、线条、矩形、圆形等二维图像。
表格中的数字表示支持 <canvas> 元素的第一个浏览器版本号：
| 元素 |
Chrome |
IE |
Firefox |
Safari |
opera |
| <canvas> |
4.0 |
9.0 |
2.0 |
3.1 |
9.0 |
<cavas> 元素属于行内元素。
创建一个画布（Canvas）
一个画布容器 <canvas> 在网页中是一个矩形框， 默认情况下 <canvas> 元素没有边框和内容。<canvas>简单实例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>Cavas 演示</title>
</head>
<body>
<canvas id="myCanvas1" width="200" height="100" style="border:1px solid #000000;">
浏览器不支持 HTML5 canvas
</canvas>
<canvas id="myCanvas2" width="200" height="100" style="border:1px solid #f00;">
浏览器不支持 HTML5 canvas
</canvas>
</body>
</html>
<cavas> 标签通常需要指定一个 id 属性 (因为脚本中经常引用), width 和 height 属性定义的画布的大小，可以在 HTML 页面中使用多个 <canvas> 元素。
JavaScript 绘制图像
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>Cavas 演示</title>
<!-- JQuery CDN-->
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(function () {
/**获取 cavas Dom 对象*/
var canvasObj = document.getElementById("myCanvas");
/**获取 context 对象，该对象提供了用于在画布上绘图的方法和属性
* 2d 是目前支持的二维图像*/
var ctx = canvasObj.getContext("2d");
/**绘制一个红色的矩形*/
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
});
</script>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
浏览器不支持 HTML5 canvas
</canvas>
</body>
</html>
设置 fillStyle 属性可以是 CSS 颜色，渐变，或图案，fillStyle 默认设置是#000000（黑色），后面会详细讲解。
fillRect(x,y,width,height) 方法绘制“被填充”的矩形，后面会详细讲解。
Canvas 坐标
canvas 是一个二维网格，canvas 的左上角坐标为 (0,0)，如上fillRect (0,0,150,75) 意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。
颜色、样式和阴影
线条样式
矩形
路 径
转 换
文本
图像绘制
像素操作
| 属性 |
描述 |
| width |
返回 ImageData 对象的宽度 |
| height |
返回 ImageData 对象的高度 |
| data |
返回一个对象，其包含指定的 ImageData 对象的图像数据 |
合成
其 他
| 方法 |
描述 |
| save() |
保存当前环境的状态 |
| restore() |
返回之前保存过的路径状态和属性 |
| createEvent() |
|
| getContext() |
|
| toDataURL() |
|