這幾天對於網頁前端有點興趣，學習了一下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介紹
以下是網頁運行的截圖：
