<!DOCTYPE HTML>
<HTML>
<HEAD>
<!--http://www.xiaoxiaozi.com/2011/06/03/2123/-->
<TITLE> New Document </TITLE>
<script>
function drawDiagonal() {
//获得canvas对象
var canvas = document.getElementById('diagonal');
//指定绘制的类型为2d，并返回其绘画环境
var context = canvas.getContext('2d');
//保存变换前的context状态
context.save();
//平移坐标系
context.translate(200,0);
//开始绘制图形:canvas需要据此计算图形的内部和外部范围
//以便后续的描边和填充
context.beginPath();
//这个0,0 其实是200，0
context.moveTo(0,0);
context.lineTo(-200,200);
//moveTo 不绘制，只是当前位置移动到新的坐标
context.moveTo(-200,0);
//不仅移动坐标，而且在两个坐标之间画线，但不是真正画出图形
context.lineTo(0,200);
//恢复context平移前的状态
context.restore();
//这时候的100,0是真正相对于原来的0，0时的100，0
context.moveTo(100,0);
context.lineTo(100,200);
context.moveTo(0,100);
context.lineTo(200,100);
//把所有的线绘制到canvas上
context.stroke();
}
window.addEventListener("load", drawDiagonal, true);
</script>
</HEAD>
<BODY>
<canvas id="diagonal" height="200" width="200" style="border:1px solid red"></canvas>
</BODY>
</HTML>
