我的javascript示例存在一些问题。请帮忙
好的，所以我尝试在加载结束时获取一个页面来加载一些js。我想我知道了，但现在它说我没有这行的数字：我的javascript示例存在一些问题。请帮忙,javascript,css,html,canvas,Javascript,Css,Html,Canvas,好的，所以我尝试在加载结束时获取一个页面来加载一些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/T
parseInt(document.getElementById('canvas').style.width);
<!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>
要获取宽度，应使用“图元”属性而不是“样式”属性：
document.getElementById('canvas').offsetWidth
要获取宽度，应使用“图元”属性而不是“样式”属性：
document.getElementById('canvas').offsetWidth
使用画布定义的宽度和高度属性不是样式属性；它们是画布对象的属性。它们定义画布坐标系的宽度和高度，而不是显示高度和宽度 画布将填充其父容器，即480px和320px。正如mVChr所提到的，您可以通过offsetWidth和跨浏览器警告，或者通过使用像jQuery这样的库，以跨浏览器的方式为您计算它来实现这一点：
$("#canvas").width();
使用画布定义的宽度和高度属性不是样式属性；它们是画布对象的属性。它们定义画布坐标系的宽度和高度，而不是显示高度和宽度 画布将填充其父容器，即480px和320px。正如mVChr所提到的，您可以通过offsetWidth和跨浏览器警告，或者通过使用像jQuery这样的库，以跨浏览器的方式为您计算它来实现这一点：
$("#canvas").width();
您的代码有一些问题。首先，获得宽度的这些线是NaN结果的原因
screenWidth = parseInt(document.getElementById('canvas').style.width);
screenHeight = parseInt(document.getElementById('canvas').style.height);
宽度和高度属性分别返回一个字符串值480px和320px。由于这些是字符串值，parseInt调用将返回NaN，因为480px不是数字。我建议按照mVCr和user85461的建议切换到offsetWidth
我认为document.getElementById'ss'行没有任何问题。当我运行它时，click事件已正确设置并触发。您的代码有一些问题。首先，获得宽度的这些线是NaN结果的原因
screenWidth = parseInt(document.getElementById('canvas').style.width);
screenHeight = parseInt(document.getElementById('canvas').style.height);
宽度和高度属性分别返回一个字符串值480px和320px。由于这些是字符串值，parseInt调用将返回NaN，因为480px不是数字。我建议按照mVCr和user85461的建议切换到offsetWidth 我认为document.getElementById'ss'行没有任何问题。当我运行它时，click事件被设置并正确触发