<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
window.onload = function () {
try {
document.createElement("canvas").getContext("2d");//这一步就是创建一个Canvas元素，可以在上面画2d的图像。
//这一步的作用就是如果你的浏览器支持HTML5，它就执行下面的一句代码，在id="support"的div中显示支持HTML5的提示，否则如果不支持那么就会出错,执行catch代码中的代码。懂了吧！
document.getElementById("support").innerHTML = "你的浏览器支持HTML5。";
} catch (e) {
document.getElementById("support").innerHTML = "你的浏览器不支持HTML5，赶快升级一下吧！";
}
}
</script>
</head>
<body>
<div id="support"></div>
</body>
</html>
先来用最简单的方法划一条直线吧。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#diagonal
{
border: 1px solid red;
width: 200px;
height: 200px;
}
</style>
<script type="text/javascript">
function drawDiagonal() {
//取得canvas元素及其绘图上下文
var canvas = document.getElementById("diagonal");
var context = canvas.getContext("2d");//传入"2d"获取二维的上下文。听说传入3d的API工作已完成了，
//传入“webgl"即可获得三维的上下文，不过我在ie9中试了，结果context为null,看来IE9不支持WEBGL规范。
//用绝对坐标来创建一条路径
context.beginPath();
context.moveTo(70, 140);
context.lineTo(140, 70);
//将这条线绘制到canvas画布上去。
context.stroke();
}
window.addEventListener("load", drawDiagonal, true);
</script>
</head>
<body>
<canvas id="diagonal">
</canvas>
</body>
</html>
这里调用了三个方法：beginPath、moveTo和lineTo,传到这条线的起点和终点的坐标。相信大家应该都知道原点(0，0)是在左上角吧。
方法moveTo和lineTo实际上并不是画线，而是通过调用stroke方法完成线条绘制。效果如下：
像前面的对上下文的很多操作（如果moveTo、lineTo、beginPath、设置样式和外观的函数）都不会直接在页面上显示出来，只有当对路径应用绘制(stroke)
or 填充(fill)方法时，才会显示那些操作的结果。
但是
，这都是特别简单的画出来的，想要比较的复杂的东西，必须用到变换 。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>转换</title>
<style type="text/css">
#diagonal
{
border: 1px solid red;
width: 200px;
height: 200px;
}
</style>
<script type="text/javascript">
function drawDiagonal() {
//取得canvas元素及其绘图上下文
var canvas = document.getElementById("diagonal");
var context = canvas.getContext("2d");
//保存当前绘画状态，以便我们画完这副画以后，再恢复到这个状态，画另一副画。
context.save();
//向右下方移动绘图上下文
context.translate(70, 140);
//以原点为起点，绘制与前面相同的线段
context.beginPath();
context.moveTo(0, 0);
context.lineTo(70, -70);
//将这条线绘制到canvas画布上去。
context.stroke();
//恢复原有的绘图状态
context.restore();
//可以开始另外一副绘图。。。。。。
}
window.addEventListener("load", drawDiagonal, true);
</script>
</head>
<body>
<canvas id="diagonal">
</canvas>
</body>
</html>
（请注意加红色背景的字）
1、首先通过ID找到并访问canvas对象。
2、接着通过调用canvas对象的getContext函数获取上下文对象。
3、接下来，保存尚未修改的context对象，这样我们即使通过moveTo、lineTo、translate等操作后，我们还是可以恢复到这个状态，然后开始绘画另一个副图，或者另外一些操作。
4、下一步是在context中调用translate函数。通过这个操作，当进行平移行为(moveTo)发生时，我们的提供的变换坐标｛translate(70,140)｝会被加到结果坐标｛moveTo(0,0)｝上去，结果移动到了坐标点(70,140){即横向：70，纵向：140}(我们暂时称坐标A吧)上面了。
5、上一步完成后，我们调用lineTo(70，-70)，意思是在上一个坐标点(70,140)上横向加70(70+70=140)，纵向减70(140-70=70)，于是我们得一点(140，70)(我们暂时称为坐标B吧),得到两个坐标点后，lineTo方法告诉我们用一条直线把A、B这两个坐标点连起来。
6、在红条勾勒出来以后，可以通过调用context.stroke()函数将其结果显示在canvas上面。
7、最后恢复到context.restore();
因为在这之后你肯定还要用到这个上下文对象去做其它的事情，如果就因为变换改变了那个对象，那绝对是不行的，所以我们虽然用
变换做了一个图，但是我们下面的这张图可能并不会用到变换，如果上面不保存，这里不恢复 ，相当于这个对象给污染了一样，所以
画完图以后，即刻恢复到原来的状态。