2013-03-18 34 views
0

我想當前在HTML5中的Canvas上工作。我對畫布很陌生,想開始研究它。我正在使用easeljs來實現畫布。但是任何人都可以指定任何特定的.js文件來實現Canvas。因爲當我使用這個.js我得到錯誤:「0x800a1391 - Microsoft JScript運行時錯誤:'階段'是未定義的如果有這種異常的處理程序,該程序可能會安全地繼續。」 這裏我片代碼,我們得到上述指定的錯誤。我只從互聯網複製了這段代碼:Canvas中使用的舞臺,矩形和其他形狀的特定.js文件

<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> 

回答

2

上面的代碼中唯一的事情就是在每個even之前添加「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> 

我已標記爲粗體,我們必須在每個函數或事件之前添加。

相關問題