0

我目前想在 HTML5 中使用 Canvas。我是画布的新手,想开始研究它。我正在使用easeljs 来实现画布。但是任何人都可以指定任何特定的 .js 文件来实现 Canvas。当我使用这个 .js 时,我收到错误:“ 0x800a1391 - Microsoft JScript 运行时错误:'Stage' 未定义如果有此异常的处理程序,程序可以安全地继续。 ”这是我的一段代码,我们得到上述指定的错误。我只从互联网上复制了这段代码:

 <script>
        //EaselJS Stage instance that wraps the Canvas element
        var stage;

        //EaselJS Shape instance that we will animate
        var circle;

        //radius of the circle Graphics that we will draw.
        var CIRCLE_RADIUS = 10;

        //x position that we will reset Shape to when it goes off
        //screen
        var circleXReset;

        //EaselJS Rectangle instance we will use to store the bounds
        //of the Canvas
        var bounds;

        //initialize function, called when page loads.
        function init() {
            //check and see if the canvas element is supported in
            //the current browser
            ////http://diveintohtml5.org/detect.html#canvas
            if (!(!!document.createElement('canvas').getContext)) {
                var wrapper = document.getElementById("canvasWrapper");
                wrapper.innerHTML = "Your browser does not appear to support " +
                "the HTML5 Canvas element";
                return;
            }

            //get a reference to the canvas element
            var canvas = document.getElementById("stageCanvas");

            //copy the canvas bounds to the bounds instance.
            //Note, if we resize the canvas, we need to reset
            //these bounds.
            //bounds = new Rectangle();
            //bounds.width = canvas.width;
            //bounds.height = canvas.height;

            //pass the canvas element to the EaselJS Stage instance
            //The Stage class abstracts away the Canvas element and
            //is the root level display container for display elements.
            stage = new Stage(canvas);

            //Create an EaselJS Graphics element to create the
            //commands to draw a circle
            var g = new Graphics();

            //stroke of 1 px
            g.setStrokeStyle(1);

            //Set the stroke color, using the EaselJS 
            //Graphics.getRGB static method.
            //This creates a white color, with an alpha
            //of .7
            g.beginStroke(Graphics.getRGB(255, 255, 255, .7));

            //draw the circle
            g.drawCircle(0, 0, CIRCLE_RADIUS);

            //note that the circle has not been drawn yet. 
            //the Graphics instance just has the commands to
            //draw the circle.
            //It will be drawn when the stage needs to render it
            //which is usually when we call stage.tick()

            //create a new Shape instance. This is a DisplayObject
            //which can be added directly to the stage (and rendered).
            //Pass in the Graphics instance that we created, and that
            //we want the Shape to draw.
            circle = new Shape(g);

            //set the initial x position, and the reset position
            circle.x = circleXReset = -CIRCLE_RADIUS;

            //set the y position
            circle.y = canvas.height / 2;

            //add the circle to the stage.
            stage.addChild(circle);

            //tell the stage to render to the canvas
            stage.update();

            Ticker.setFPS(24);

            //Subscribe to the Tick class. This will call the tick
            //method at a set interval (similar to ENTER_FRAME with
            //the Flash Player)
            Ticker.addListener(this);
        }

        //function called by the Tick instance at a set interval
        function tick() {
            //check and see if the Shape has gone of the right
            //of the stage.
            if (circle.x > bounds.width) {
                //if it has, reset it.
                circle.x = circleXReset;
            }

            //move the circle over 10 pixels
            circle.x += 8;

            //re-render the stage
            stage.update();
        }
    </script>
4

1 回答 1

2

上面代码中唯一的事情就是在每个偶数之前添加“createjs”。

<script>
        //EaselJS Stage instance that wraps the Canvas element
        var stage;

        //EaselJS Shape instance that we will animate
        var circle;

        //radius of the circle Graphics that we will draw.
        var CIRCLE_RADIUS = 10;

        //x position that we will reset Shape to when it goes off
        //screen
        var circleXReset;

        //EaselJS Rectangle instance we will use to store the bounds
        //of the Canvas
        var bounds;

        //initialize function, called when page loads.
        function init() {
            //check and see if the canvas element is supported in
            //the current browser
            ////http://diveintohtml5.org/detect.html#canvas
            if (!(!!document.createElement('canvas').getContext)) {
                var wrapper = document.getElementById("canvasWrapper");
                wrapper.innerHTML = "Your browser does not appear to support " +
                "the HTML5 Canvas element";
                return;
            }

            //get a reference to the canvas element
            var canvas = document.getElementById("stageCanvas");

            //copy the canvas bounds to the bounds instance.
            //Note, if we resize the canvas, we need to reset
            //these bounds.
            //var s = new Shape();
            //s.graphics.setStrokeStyle(1).beginStroke("#f00").drawRect(0, 0, canvas.width, canvas.height);
            //stage.addChild(s);
            bounds = new **createjs**.Rectangle();
            bounds.width = canvas.width;
            bounds.height = canvas.height;

            //pass the canvas element to the EaselJS Stage instance
            //The Stage class abstracts away the Canvas element and
            //is the root level display container for display elements.
            stage = new createjs.Stage(canvas);

            //Create an EaselJS Graphics element to create the
            //commands to draw a circle
            var g = new **createjs**.Graphics();

            //stroke of 1 px
            g.setStrokeStyle(1);

            //Set the stroke color, using the EaselJS 
            //Graphics.getRGB static method.
            //This creates a white color, with an alpha
            //of .7
            g.beginStroke(createjs.Graphics.getRGB(255, 255, 255, .7));

            //draw the circle
            g.drawCircle(0, 0, CIRCLE_RADIUS);

            //note that the circle has not been drawn yet. 
            //the Graphics instance just has the commands to
            //draw the circle.
            //It will be drawn when the stage needs to render it
            //which is usually when we call stage.tick()

            //create a new Shape instance. This is a DisplayObject
            //which can be added directly to the stage (and rendered).
            //Pass in the Graphics instance that we created, and that
            //we want the Shape to draw.
            circle = new createjs.Shape(g);

            //set the initial x position, and the reset position
            circle.x = circleXReset = -CIRCLE_RADIUS;

            //set the y position
            circle.y = canvas.height / 2;

            //add the circle to the stage.
            stage.addChild(circle);

            //tell the stage to render to the canvas
            stage.update();

            createjs.Ticker.setFPS(24);

            //Subscribe to the Tick class. This will call the tick
            //method at a set interval (similar to ENTER_FRAME with
            //the Flash Player)
            createjs.Ticker.addListener(this);
        }

        //function called by the Tick instance at a set interval
        function tick() {
            //check and see if the Shape has gone of the right
            //of the stage.
            if (circle.x > bounds.width) {
                //if it has, reset it.
                circle.x = circleXReset;
            }

            //move the circle over 10 pixels
            circle.x += 8;

            //re-render the stage
            stage.update();
        }
    </script>

我已将我们必须在每个函数或事件之前添加的内容标记为粗体。

于 2013-03-18T06:52:05.987 回答