基本示例 (2)

hitTest

<!DOCTYPE html>
<html>
<head>
    <title>EaselJS demo: onClick</title>
    <style type="text/css">
        canvas {
            border: 1px solid #ff6a00;
        }
    </style>
    <script src="easeljs-0.5.0.min.js"></script>
    <script>
        var stage, circle;
        function init() {
            stage = new createjs.Stage("demoCanvas");

            circle = stage.addChild(new createjs.Shape());
            circle.graphics.beginFill("red").drawCircle(50, 50, 50);
            circle.x = 0;
            circle.y = 0;

            createjs.Ticker.addListener(this);
        }

        function tick() {
            circle.alpha = 0.2;
            if (circle.hitTest(stage.mouseX, stage.mouseY)) { circle.alpha = 1; }
            stage.update();
        }
	</script>
</head>
<body onload="init();">
    <canvas id="demoCanvas" width="500" height="200">alternate content
	</canvas>
</body>
</html>

　　

globalToLocal实现转动的圆

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        canvas {
            border: 1px solid #ff6a00;
        }
    </style>
    <script src="easeljs-0.5.0.min.js"></script>
    <script>
        var stage, holder;
        function init() {
            stage = new createjs.Stage("demoCanvas");
            holder = stage.addChild(new createjs.Container());
            holder.x = holder.y = 150;

            for (var i = 0; i < 25; i++) {
                var shape = new createjs.Shape();
                shape.graphics.beginFill(createjs.Graphics.getHSL(Math.random() * 360, 100, 50)).drawCircle(0, 0, 30);
                shape.x = Math.random() * 300 - 150;
                shape.y = Math.random() * 300 - 150;
                holder.addChild(shape);
            }
           createjs.Ticker.addListener(this);
        }

        function tick() {
            holder.rotation += 3;
            var l = holder.getNumChildren();
            for (var i = 0; i < l; i++) {
                var child = holder.getChildAt(i);
                child.alpha = 0.1;
                var pt = child.globalToLocal(stage.mouseX, stage.mouseY);
                if (stage.mouseInBounds && child.hitTest(pt.x, pt.y)) { child.alpha = 1; }
            }

            stage.update();
        }
	</script>
</head>
<body onload="init();">
    <canvas id="demoCanvas" width="500" height="500"></canvas>
</body>
</html>

　　

localToLocal

<!DOCTYPE html>
<html>
<head>
    <title>EaselJS demo: onClick</title>
    <style type="text/css">
        canvas {
            border: 1px solid #ff6a00;
        }
    </style>
    <script src="easeljs-0.5.0.min.js"></script>
	<script>
	    var stage, arm;
	    function init() {
	        stage = new createjs.Stage("demoCanvas");

	        target = stage.addChild(new createjs.Shape());
	        target.graphics.beginFill("red").drawCircle(0, 0, 45)
				.beginFill("white").drawCircle(0, 0, 30)
				.beginFill("red").drawCircle(0, 0, 15);
	        target.x = 100;
	        target.y = 180;

	        arm = stage.addChild(new createjs.Shape());
	        arm.graphics.beginFill("black").drawRect(-2, -2, 100, 4)
				.beginFill("blue").drawCircle(100, 0, 8);
	        arm.x = 180;
	        arm.y = 100;

	        createjs.Ticker.addListener(this);
	    }

	    function tick() {
	        arm.rotation += 5;

	        target.alpha = 0.2;
	        var pt = arm.localToLocal(100, 0, target);
	        if (target.hitTest(pt.x, pt.y)) { target.alpha = 1; }

	        stage.update();
	    }
	</script>
</head>
<body onload="init();">
    <canvas id="demoCanvas" width="500" height="200">alternate content
	</canvas>
</body>
</html>

　　

posted @ 2012-11-22 14:06  bradleydan  阅读(280)  评论(0)    收藏  举报