Canvas的概念最初由苹果公司提出，用于在Mac OS X WebKit中创建控件。在Canvas之前，程序员通常用Adobe的Flash或SVG绘图。
创建canvas元素
<canvas></canvas>
为避免浏览器不支持canvas而出现显示异常，可以在canvas中添加替代文本：
<canvas>
not support canvas
</canvas>
默认canvas会创建一个width为300，height为150的矩形区域。在页面中添加canvas元素后，可以通过JavaScript控制绘图。使用canvas首先需要获取上下文（context），并在上下文中执行绘图动作。canvas的坐标系以左上为原点，记为(0,0)，x轴沿水平向右延伸，y轴沿垂直向下延伸。常见JavaScript代码框架：
var canvas = document.getElementById("canvasid");
var context = canvas.getContext("2d");
context.xxx();
常见的上下文方法：
| 方法 | 说明 |
|---|---|
| context.beginPath() | 绘制路径。 |
| context.moveTo(x,y) | 移动到制定坐标。 |
| context.lineTo(x,y) | 绘制到目标坐标的一条直线。 |
| context.arc(x,y,r,st_angle,ed_angle, counterclockwise) | 绘制圆。 |
| context.closePath() | 绘制闭合的图形。 |
| context.stoke() | 真实的绘制图片。 |
画一条对角线
画一个简单的正方形
画一个简单的棋盘
棋盘上标数字