Canvas画布是HTML5的特性，可以制作动画、游戏；
手册文档：https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial
放置一个canvas标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
canvas{
border:1px solid #333;
}
</style>
</head>
<body>
<canvas id="mycanvas" width="600" height="400"></canvas>
</body>
</html>
注意，千万不要用css来设置width、height，应该使用canvas标签的属性。
js部分
<script type="text/javascript">
//得到节点
var mycanvas = document.getElementById("mycanvas");
//得到上下文
var ctx = mycanvas.getContext("2d");
//绘制一个矩形
ctx.fillStyle = "blue";
ctx.fillRect(100 , 100 , 180 , 60);
//绘制一个圆形
ctx.fillStyle = "gold";
ctx.beginPath();
ctx.arc(390 , 190 , 110 , 0 , Math.PI * 2 , true);
ctx.fill();
ctx.strokeStyle = "red";
ctx.lineWidth = 10;
ctx.stroke();
ctx.closePath();
</script>
所有的属性语句，都是进行一些配置
ctx.fillStyle = "blue";
...
ctx.fillStyle = "gold";
....
ctx.strokeStyle = "red";
....
ctx.lineWidth = 10;
所有的方法语句，都是在执行“动令”
ctx.fillRect(100 , 100 , 180 , 60);
....
ctx.arc(390 , 190 , 110 , 0 , Math.PI * 2 , true);
........
ctx.fill();
...
ctx.stroke();
canvas的API确实很简单，常用的属性和方法加起来只有16个。