所以我试图通过按钮点击在我定义的舞台中画一个圆圈。我在页面上没有收到任何错误,点击后没有错误。我已经使用了调试消息并且代码正在执行,但我看不到任何图像显示或任何错误指示。我能得到一些帮助吗?谢谢。
这是我的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);
}
}
答案 0 :(得分:2)
使用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>