我的 javascript 示例存在一些问题。请帮忙
好吧，所以我试图让一个页面在加载结束时加载一些js。我想我明白了，但现在它说我没有通过这一行得到一个数字：
parseInt(document.getElementById('canvas').style.width);
它应该是“480px”，但它是 NaN。
它还表示 document.getElementById('ss') 行为空。
这是完整的内容：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Cypri Designs</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="/images/favicon1.ico" type="image/x-icon" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script type="text/javascript">
<!--
//Variables to handle game parameters
var gameloopId;
var screenWidth;
var screenHeight;
var gameRunning = false;
var ctx;
var playerX = 0;
var playerY = 0;
//Create images
var playerImg = new Image();
//Wait for DOM to load and init game
window.onload = function(){
init();
};
function init(){
initSettings();
initImages();
//add event handler to surrounding DIV to monitor mouse move and update mushroom's x position
/*$("#container").mousemove(function(e){
mushroomX = e.pageX;
});*/
//add event handler for clicking on start/stop button and toggle the game play
document.getElementById('ss').onclick = function (){
toggleGameplay();
};
}
function initSettings()
{
//Get a handle to the 2d context of the canvas
ctx = document.getElementById('canvas').getContext('2d');
//Calulate screen height and width
screenWidth = parseInt(document.getElementById('canvas').style.width);
screenHeight = parseInt(document.getElementById('canvas').style.height);
playerX = 100;
playerY = 100;
}
function initImages(){
playerImg.src = "images/player.png";
}
//Main game loop, it all happens here!
function gameLoop(){
//Clear the screen (i.e. a draw a clear rectangle the size of the screen)
ctx.clearRect(0, 0, screenWidth, screenHeight);
ctx.save();
ctx.drawImage(playerImg, 0, 0);
ctx.restore();
}
//Start/stop the game loop (and more importantly that annoying boinging!)
function toggleGameplay()
{
gameRunning = !gameRunning;
if(gameRunning)
{
clearInterval(gameloopId);
gameloopId = setInterval(gameLoop, 10);
}
else
{
clearInterval(gameloopId);
}
}
//-->
</script>
</head>
<body>
<input id="ss" type="button" value="start/stop" />
<div id="container" style="border:1px solid; cursor:none; width:480px; height:320px;">
<canvas id="canvas" width="480px" height="320px" >
Canvas not displaying.
</canvas>
</div>
</body>
</html>
Alright, so I'm trying to get a page to load some js at the end of it's loading. I think I got it, but now it's saying I'm not getting a number with this line:
parseInt(document.getElementById('canvas').style.width);
It should be "480px" but it's NaN.
It also said the line document.getElementById('ss') was null.
Here's the full thing:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Cypri Designs</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="/images/favicon1.ico" type="image/x-icon" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script type="text/javascript">
<!--
//Variables to handle game parameters
var gameloopId;
var screenWidth;
var screenHeight;
var gameRunning = false;
var ctx;
var playerX = 0;
var playerY = 0;
//Create images
var playerImg = new Image();
//Wait for DOM to load and init game
window.onload = function(){
init();
};
function init(){
initSettings();
initImages();
//add event handler to surrounding DIV to monitor mouse move and update mushroom's x position
/*$("#container").mousemove(function(e){
mushroomX = e.pageX;
});*/
//add event handler for clicking on start/stop button and toggle the game play
document.getElementById('ss').onclick = function (){
toggleGameplay();
};
}
function initSettings()
{
//Get a handle to the 2d context of the canvas
ctx = document.getElementById('canvas').getContext('2d');
//Calulate screen height and width
screenWidth = parseInt(document.getElementById('canvas').style.width);
screenHeight = parseInt(document.getElementById('canvas').style.height);
playerX = 100;
playerY = 100;
}
function initImages(){
playerImg.src = "images/player.png";
}
//Main game loop, it all happens here!
function gameLoop(){
//Clear the screen (i.e. a draw a clear rectangle the size of the screen)
ctx.clearRect(0, 0, screenWidth, screenHeight);
ctx.save();
ctx.drawImage(playerImg, 0, 0);
ctx.restore();
}
//Start/stop the game loop (and more importantly that annoying boinging!)
function toggleGameplay()
{
gameRunning = !gameRunning;
if(gameRunning)
{
clearInterval(gameloopId);
gameloopId = setInterval(gameLoop, 10);
}
else
{
clearInterval(gameloopId);
}
}
//-->
</script>
</head>
<body>
<input id="ss" type="button" value="start/stop" />
<div id="container" style="border:1px solid; cursor:none; width:480px; height:320px;">
<canvas id="canvas" width="480px" height="320px" >
Canvas not displaying.
</canvas>
</div>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
要获取宽度，您应该使用 element 属性而不是 style 属性：
To get the width you should use the element property instead of the style property:
您在画布上定义的“宽度”和“高度”属性不是样式属性；它们是画布对象的属性。它们定义画布坐标系的宽度和高度，而不是显示高度和宽度。
画布将填充其父容器，即 480 像素和 320 像素。正如 mVChr 提到的，您可以通过“offsetWidth”（带有跨浏览器警告）来获取此值，或者使用像 jQuery 这样的库，它将以跨浏览器的方式为您计算它：
The "width" and "height" properties you defined with the canvas are not style properties; they are attributes of the canvas object. They define the width and height of the canvas's coordinate system, not the display height and width.
The canvas will fill its parent container, which is 480px and 320px. As mVChr mentioned, you could get this through "offsetWidth" (with cross-browser caveats), or by using a library like jQuery that will compute it for you in a cross-browser way:
您的代码有一些问题。首先，您获得宽度的这些线是导致 NaN 结果的原因。
width 和 height 属性分别返回一个字符串值，480px 和 320px。由于这些是字符串值，因此 parseInt 调用将返回 NaN，因为 480px 不是数字。我建议切换到 offsetWidth，如 mVCr 和 user85461 所推荐的。
我没有看到 document.getElementById('ss') 行有任何问题。当我运行它时，单击事件已设置并正确触发。
Your code has a few problems. First, these lines where you are getting the width are the cause of your NaN result.
The width and height properties return a string value, 480px and 320px respectively. Since those are string values, the parseInt call will return NaN because 480px is not a number. I'd recommend switching to offsetWidth as mVCr and user85461 recommended.
And I don't see any problem with the document.getElementById('ss') line. When I ran it, the click event was setup and fired correctly.