動力學圓不會畫按鈕點擊

所以我想從按鈕點擊在我定義的舞臺內畫一個圓。我在網頁上沒有收到任何錯誤，點擊後沒有錯誤。我使用了調試消息，代碼正在執行，但我看不到任何圖像顯示或任何錯誤指示。我可以幫忙嗎？謝謝。動力學圓不會畫按鈕點擊

這裏是我的javascript代碼（這是我的第一篇文章，我希望我這樣做是正確的）

var height = $(".game").height(); 
var width = $(".game").width(); 
$(function() { 
    $('#head').on('click', function() { 
     shapeMaker.createHead(); 
    }); 
}); 

var shapeMaker = { 
    stage: null, 
    head: null, 

    createHead: function() { 

     var stage = new Kinetic.Stage({ 
      container: 'game', 
      width: $('.game').width(), 
      height: $('.game').height() 
     }); 

     var head = new Kinetic.Layer(); 
     var circle = new Kinetic.Circle({ 
      x: 0, 
      y: 0, 
      radius: stage.getHeight()/3, 
      fill: '#FFDF5E', 
      stroke: 'black', 
      strokeWidth: 3 
     }); 

     // add the shape to the layer 
     head.add(circle); 

     // add the layer to the stage 
     head.draw(); 
     stage.add(head); 
    } 
}

來源

2014-02-24 hippofluff

使用ID的替代類

// game board 

<div id="game"></div> 

$("#game") 

// button 

<button id="head">Build</button> 

$('#head')

這裏的代碼和演示：http://jsfiddle.net/m1erickson/Uh8XW/

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Prototype</title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script> 

<style> 
body{padding:20px;} 
#game{ 
    border:solid 1px #ccc; 
    margin-top: 10px; 
    width:350px; 
    height:350px; 
} 
</style>   
<script> 
$(function(){ 

    $('#head').on('click', function(){ 
     shapeMaker.createHead(); 
    }); 

    var shapeMaker = { 

     stage: null, 
     head: null, 
     createHead: function() { 

      var stage = new Kinetic.Stage({ 
       container: 'game', 
       width: $('#game').width(), 
       height: $('#game').height() 
      }); 
      var head = new Kinetic.Layer(); 
      stage.add(head); 

      var circle = new Kinetic.Circle({ 
       x: 0, 
       y: 0, 
       radius: stage.getHeight()/3, 
       fill: '#FFDF5E', 
       stroke: 'black', 
       strokeWidth: 3 
      }); 
      head.add(circle); 
      head.draw(); 
     } 

    } 

}); // end $(function(){}); 

</script>  
</head> 
<body> 
    <button id="head">Build</button> 
    <div id="game"></div> 
</body> 
</html>

來源

2014-02-24 02:48:38 markE

動力學圓不會畫按鈕點擊

回答

相關問題