DOMElement

源码如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        canvas {
        border:1px solid #ff6a00;
        }
    </style>
    <script type="text/javascript" src="../src/easeljs/utils/UID.js"></script>
    <script type="text/javascript" src="../src/easeljs/geom/Matrix2D.js"></script>
    <script type="text/javascript" src="../src/easeljs/display/DisplayObject.js"></script>
    <script type="text/javascript" src="../src/easeljs/display/Container.js"></script>
    <script type="text/javascript" src="../src/easeljs/display/Stage.js"></script>
    <script type="text/javascript" src="../src/easeljs/events/MouseEvent.js"></script>
    <script type="text/javascript" src="../src/easeljs/display/Shape.js"></script>
    <script type="text/javascript" src="../src/easeljs/display/Graphics.js"></script>
    <script type="text/javascript" src="../src/easeljs/utils/Ticker.js"></script>
    <script type="text/javascript" src="../src/easeljs/display/DOMElement.js"></script>
    <script type="text/javascript">
        function Init() {
            var canvas = document.getElementById("MyCanvas");
            var stage = new createjs.Stage(canvas);
            var container = new createjs.Container();
            stage.addChild(container);
            var frame = new createjs.Shape();
            frame.graphics.beginFill("#00F").drawRect(0, 0, 340, 280);
            frame.regX = 170;
            frame.regY = 140;
            var content = new createjs.DOMElement("foo");
            content.regX = 165;
            content.regY = 135;
            var o = content.clone();
            stage.addChild(o);
          //  content.visible = false;
            container.addChild(frame, content);
            container.x = 300;
            container.y = 200;
            container.alpha = 0.5;
            container.rotation = 25;
            container.scaleX = 1.5;
           // container.scaleY = 2;
          //  container.visible = false;
            stage.update();
        }
    </script>
</head>
<body onload="Init();">
    <div>
        <div id="foo" style="z-index: 1; position: absolute; background-color: #FF0000; width: 320px; height: 260px; padding: 5px; visibility: hidden;">
            <b>Hello! I'm an HTML div.</b><br />
            <br />
            I am not rendered to the canvas, but I can be included in the display list for positioning and transformations.<br />
            <br />
            This means I can contain any HTML content (rich text, forms, video, etc), but I'm not a full part of the EaselJS display list.<br />
            <br />
            <a href="http://easeljs.com/">This is a link</a>
        </div>
        <canvas id="MyCanvas" width="960" height="400"></canvas>
    </div>
</body>
</html>

　　

posted @ 2012-11-21 12:32  bradleydan  阅读(232)  评论(0)    收藏  举报