2014-06-11 24 views
0

這裏我想創建一個紅色的球,它是simpleBall構造函數的一個實例,但是我寫的代碼並沒有在canvas上繪製任何東西。我不確定我的代碼有什麼問題,請幫助我!在畫布上使用構造函數在畫布上畫一個紅色的球

fiddle for my code

代碼:

<html> 
    <head> 

    <script src="http://code.createjs.com/easeljs-0.7.1.min.js"></script> 
    </head> 
    <body> 
    <canvas id="mycanvas" width="1000" height="500" style="border:1px solid black;"></canvas> 

<script> 
    function makeit(){ 

     function simpleBall(color,radius){ 
     this.color=color; 
     this.radius=radius; 
     this.initialize(); 

     } 

    simpleBall.prototype.initialize=function(){ 
     this.s=this.getGraphics(); 
     } 

    simpleBall.prototype.getGraphics=function(){ 
      var s=new createjs.Shape(); 

      s.graphics.beginFill(this.color).drawCircle(0,0,this.radius); 
      return s; 

     } 

    var canvas=document.getElementById("mycanvas"); 
    var stage=new createjs.Stage(canvas); 
    var ball=new simpleBall("red",10); 
    ball.x=100; 
    ball.y=100; 
    stage.addChild(ball); 
    stage.update(); 
    } 
window.onload=makeit; 
</script> 

</body> 

</html> 

回答

0

的simpleBall例如 「球」 是不是一個DisplayObject。您必須引用s屬性,因爲這是Shape實例。在您的示例中,您應該在控制檯中看到錯誤。

var ball=new simpleBall("red",10); 
var shape = ball.s; 
shape.x=100; 
shape.y=100; 
stage.addChild(shape);