Question

好吧，所以我试图让一个页面在加载结束时加载一些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>

Answer 1

要获得宽度，您应该使用element属性而不是style属性：

document.getElementById('canvas').offsetWidth

Answer 2

使用画布定义的“width”和“height”属性不是样式属性;它们是canvas对象的属性。它们定义画布坐标系的宽度和高度，而不是显示高度和宽度。

画布将填充其父容器，即480px和320px。正如mVChr所提到的，你可以通过“offsetWidth”（使用跨浏览器警告），或者使用像jQuery这样的库来以跨浏览器的方式为你计算它：

$("#canvas").width();

Answer 3

您的代码存在一些问题。首先，您获得宽度的这些行是导致NaN结果的原因。

            screenWidth = parseInt(document.getElementById('canvas').style.width);
            screenHeight = parseInt(document.getElementById('canvas').style.height);

width和height属性分别返回一个字符串值480px和320px。由于这些是字符串值，因此parseInt调用将返回NaN，因为480px不是数字。我建议切换到offsetWidth为mVCr和user85461推荐。

我没有看到document.getElementById（'ss'）行有任何问题。当我运行它时，单击事件已设置并正确触发。

我的javascript示例有一些问题。请帮忙

3 个答案: