<canvas id="myCanvas" width="150" height="150"></canvas>
好吧这就是传说中的<canvas>元素，它可以帮助你实现在网页上玩儿涂鸦或者制作游戏的梦想。它只有两个属性， width 和 height ，不填的话默认 width="300"，height="150"。canvas的宽和高也可以通过css来进行设置，不过使用css改变canvas的高度有可能会造成渲染结果变形，所以不建议使用。
因为canvas元素比较新所以在使用的时候需要加入替换内容，具体方法很简单:
<canvas>这里加入替换元素</canvas>
canvas初始化是空白的，要在上面用脚本画图首先需要渲染上下文 (rendering context) ，它可以通过canvas元素对象的getContext方法来获取，同时得到的还有一些画图用的函数。getContext() 接受一个用于描述其类型的值作为参数。
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');//现在只有2d渲染模式
上面第一行通过 getElementById 方法取得 canvas 对象的 DOM 节点。然后通过其 getContext 方法取得其画图操作上下文。
除了使用替换内容还可以用 js 检查浏览器是否支持 canvas 。即判断 getContext 是否存在：
var canvas = document.getElementById('myCanvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// 绘图代码
} else {
// 不支持 canvas 提示内容
}
在canvas里面的坐标是左上角原点为（0，0），x轴最大坐标为（width，0），y轴最大坐标为（0,height），如图所示：
接下来上代码演示如何在 canvas 上绘制两个矩形：
<html>
<head>
<script type="text/javascript">
function draw() {
var canvas = document.getElementById("myCanvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
}
}
</script>
</head>
<body onload="draw();">
<canvas id="myCanvas" width="150" height="150"></canvas>
</body>
</html>
其中fillStyle设置填充颜色，fillRect (x, y, width,height) 使用分别使用矩形左上角坐标及矩形的宽和高进行绘制。
canvas 图形绘制简易模板：
<html>
<head>
<title>myCanvas</title>
<script type="text/javascript">
function draw(){
var canvas = document.getElementById('myCanvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
}
}
</script>
</head>
<body onload="draw();">
<canvas id="myCanvas" width="150" height="150"></canvas>
</body>
</html>
直接保存下来备用吧!