Lufylegend库学习笔记1 绘图操作及鼠标事件

这几天对于网页前端有点兴趣,学习了一下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介绍

以下是网页运行的截图:


阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/pdcxs007/article/details/42275595
个人分类: 网页前端
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭