canvas 标签

<canvas> 是 HTML5 中的新标签，它是为了让客户端显示矢量图形设计的（必须使用脚本来绘制图形）。

如何用 canvas 标签来绘制图形

API 并没有定义在 <canvas> 元素本身上，而是定义在通过画布的 getContext() 获得的一个“绘图环境”上。
通过 Canvas 对象的 getContext(“2d”) 获得 CanvasRenderingContext2D 对象（这个绘图的东东里面才提供了真正的绘图功能）。下面来看看 Canvas 对象。

Canvas 对象

Canvas 对象就是一个 HTML 画布元素 <canvas>。它没有自己的行为，而是把绘图的 API 给了客户端的 JS，让脚本在画布上绘制图形。它本身拥有标准属性、事件属性。

Canvas 对象的属性
height 画布的高度（当改变时，已经完成的任何绘图都会擦除掉重新画）
width 画布的宽度（当改变时，同上）

<canvas> 默认大小 300*150px，当然可以通过属性来动态设置其大小

Canvas 对象的方法
getContext(“2d”) //当前唯一的合法值是”2d”
它返回作用于画布上的绘图环境，是一个 CanvasRenderingContext2D 对象，该对象导出一个二维绘图的 API，使用它可以绘制图形到 Canvas 元素中。

Canvas API

Canvas API 使用了路径的表示法。只是，路径由一系列的方法调用来定义的，而不是描述为字母和数字的字符串。一旦定义了路径，其他的方法都是对此路径来操作的。

对比：canvas、SVG、VML

它们都是适量图，唯一的不同：

1. <canvas> 标记：有一个基于JS绘图的API
2. SVG和VML：有一个XML文档来描述绘图

各有强弱项，比如当要修改画图时，SVG 绘图容易编辑，只要从其描述中移除元素就行了。而 <canvas> 标记中移除元素，往往需要擦掉绘图-再重新绘制。

参考及扩展

<canvas> 标签：http://www.w3school.com.cn/tags/tag_canvas.asp

Canvas 教程（用Canvas在网页上绘制图形）：http://www.w3school.com.cn/html5/html_5_canvas.asp
Canvas 教程：https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Canvas_tutorial

Canvas 参考手册：http://www.w3school.com.cn/tags/html_ref_canvas.asp
Canvas API（来自 《JavaScript 标准参考教程》）：http://javascript.ruanyifeng.com/htmlapi/canvas.html