一、控件代码
<canvas id="myCanvas" height="200px" width="200px" style="border:1px solid #000000;">
</canvas>
二、addEventListener监听代码
function MyDraw() {
//取得canvas的元素及其绘图上下文
var canvasObj = document.getElementById("myCanvas");
var context = canvasObj.getContext("2d");
//用绝对坐标来创建一条路径
//画两条对角线
context.beginPath();
//将点移动至原点
context.moveTo(0, 0);
//划线至右下角
context.lineTo(200, 200);
//将这条线绘制到canvas上
context.stroke();
//将点移动至右下角
context.moveTo(0, 200);
//划线至右上角 www.2cto.com
context.lineTo(200, 0);
//将这条线绘制到canvas上
context.stroke();
}
//页面导入的时候执行画图程序
window.addEventListener("load", MyDraw, true);