<! doctype html>
<html>
<head>
<script type="text/javascript">
function drawDiagonal(){
//取得canvas元素及其绘图上下文
var c = document.getElementById("diagonal");
var cxt = c.getContext("2d");
//使用绝对坐标来创建一条路径
cxt.beginPath();
cxt.moveTo(0,0);
cxt.lineTo(140,70);
//将这条线绘制到canvas上
cxt.stroke();
}
// window.addEventListener("load",drawDiagonal,true);
</script>
</head>
<body>
<canvas id="diagonal" style="border: 1px solid"width="300" height="300"> 浏览器不支持此标签 </canvas>
<input type="button" value="画线" onClick="drawDiagonal();" />
</body>
</html>
注释：1、window.addEventListener("load",drawDiagonal,true);
网页加载就执行js ----addEventListener 有三个参数：第一个参数表示事件名称（不含 on，如 "click"）；第二个参数表示要接收事件处理的函数；第三个参数为 useCapture
也可以在页面添加一个按钮，然后调用js。
2、html5需要在ff，opera，等支持html5的浏览器上执行。