这几天对于网页前端有点兴趣，学习了一下Canvas的相关知识。
看到Lufylegend库之后，感觉很棒，有一种在写AS的感觉。今天入门第一站，写了一个画板。
是一个非常简易的画板，但是可以看到一些重要的思想。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mouse Event</title>
<script src="http://static.blog.csdn.net/scripts/jquery.js" type="text/javascript"></script>
<script src="http://lufylegend.com/js/lufylegend-1.9.7.min.js"></script>
</head>
<body>
<div id="tester"></div>
<script>
init(1, "tester", 500, 350, main);
var stage;
function main() {
LGlobal.setDebug(false);
trace("on debug");
stage = new LSprite();
addChild(stage);
/*stage.graphics.add(function(coordX, coordY) {
LGlobal.canvas.fillStyle="#333";
LGlobal.canvas.beginPath();
LGlobal.canvas.fillRect(0, 0, 500, 350);
});*/
stage.graphics.drawRect(0,"#000", [0, 0, 500, 350], true, "#333");
stage.graphics.lineStyle(5, "#F00");
stage.addEventListener(LMouseEvent.MOUSE_DOWN, onMouseDown);
stage.addEventListener(LMouseEvent.MOUSE_UP, onMouseUp);
}
function onMouseDown(event) {
trace("mouse down");
stage.graphics.beginPath();
stage.graphics.moveTo(event.offsetX, event.offsetY);
stage.addEventListener(LMouseEvent.MOUSE_MOVE, onMouseMove);
}
function onMouseUp(event) {
stage.removeEventListener(LMouseEvent.MOUSE_MOVE, onMouseMove);
trace("mouse up");
}
function onMouseMove(event) {
stage.graphics.lineTo(event.offsetX, event.offsetY);
stage.graphics.stroke();
stage.graphics.moveTo(event.offsetX, event.offsetY);
trace("mouse move");
}
</script>
</body>
</html>
真的与Flash很像。trace函数用于测试，如果将LGlobal.setDebug设置为true的话，可以直接得到输出。具体可以参考：官方文档trace介绍
以下是网页运行的截图：
时间： 2024-10-24 07:49:01