Question

我有一个用于JavaScript游戏的画布。当使用jQuery或外部CSS时，画布大小正确，但游戏图形比它们应该更大（导致大多数图形不显示在屏幕上）。

使用内联CSS时，我没有遇到任何图形问题。虽然它确实完成了工作，但我需要能够随时重新调整画布大小。

使用jQuery时，我会在调整大小后抓住画布的上下文，希望这样可行，但事实并非如此。有人可以告诉我发生了什么，或者指导我到可以了解更多关于管理HTML画布上下文的地方吗？

这是我的HTML代码，不包含inline-css

HTML：

<!DOCTYPE html>
<html>

        <head>
                <script type = "text/javascript" src = "//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
                <script type = "text/javascript" src = "games/snake.js"></script>

                <link rel = "stylesheet" type = "text/css" href = "styles/home.css" />
        </head>

        <body>
                <div id = "navBar" class = "navAtt">
                        <div id = "firstButton" class = "navButton">Play Game</div> 
                </div>

                <div id = "mainView" class = "center">
                        <canvas id = "canvas" class = "center"></canvas>
                </div> 

                <script>
                        var firstButton = $("#firstButton");
                        var canvas = $("#canvas");

                        firstButton.click(function() {
                                /* This is where I was sizing with jQuery; no other size methods were used
                                        canvas.width(450);
                                        canvas.height(400);
                                */
                                var ctx = $("#canvas")[0].getContext("2d");
                                startSnakeGame(canvas.width(), canvas.height(), ctx);
                        });
                </script>
        </body>
</html>

CSS：

body {
        background-color: #66C2FF;
        margin: 0;
}

#navBar {
        border-bottom: 2px solid #2CABB4;
        position: fixed;
        width: 100%;
}

#mainView {
        padding-top: 100px;
        width: 1200px;
}

#canvas { /* This is how I'm affecting the size; This is blank when I try using jQuery */
        width: 450px;
        height: 400px;
}

.center {
        margin-left: auto;
        margin-right: auto;
}

.navAtt {
        background-color: #29A3A3;
        height: 40px;
        opacity: 0.7;
}

.navButton {
        padding: 10px 20px;
        float:left;
}

JavaScript（游戏）

function startSnakeGame(w, h, ctx) {
    init();

    var cw = 10;
    var d;
    var food;
    var score;
    var cw = 10;
    var d;
    var food;
    var score;
    var snake_array; 

    function init() {
        d = "right"; 
        create_snake();
        create_food(); 
        score = 0;

        if(typeof game_loop != "undefined") clearInterval(game_loop);
        game_loop = setInterval(paint, 60);
    }

    function create_snake() {
        var length = 5; 
        snake_array = []; 
        for(var i = length-1; i>=0; i--) {
            snake_array.push({x: i, y:0});
        }
    }

    function create_food() {
        food = {
            x: Math.round(Math.random()*(w-cw)/cw), 
            y: Math.round(Math.random()*(h-cw)/cw), 
        };
    }

    function paint() {
        ctx.fillStyle = "white";
        ctx.fillRect(0, 0, w, h);
        ctx.strokeStyle = "black";
        ctx.strokeRect(0, 0, w, h);

        var nx = snake_array[0].x;
        var ny = snake_array[0].y;

        if(d == "right") nx++;
        else if(d == "left") nx--;
        else if(d == "up") ny--;
        else if(d == "down") ny++;

        if(nx == -1 || nx == w/cw || ny == -1 || ny == h/cw || check_collision(nx, ny, snake_array)) {
            init();
            return;
        }

        if(nx == food.x && ny == food.y) {
            var tail = {x: nx, y: ny};
            score++;
            create_food();
        } else {
            var tail = snake_array.pop(); 
            tail.x = nx; tail.y = ny;
        }

        snake_array.unshift(tail);

        for(var i = 0; i < snake_array.length; i++) {
            var c = snake_array[i];
            paint_cell(c.x, c.y);
        }

        paint_cell(food.x, food.y);
        var score_text = "Score: " + score;
        ctx.fillText(score_text, 5, h-5);
    }

    function paint_cell(x, y) {
        ctx.fillStyle = "blue";
        ctx.fillRect(x*cw, y*cw, cw, cw);
        ctx.strokeStyle = "white";
        ctx.strokeRect(x*cw, y*cw, cw, cw);
    }

    function check_collision(x, y, array) {
        for(var i = 0; i < array.length; i++) {
            if(array[i].x == x && array[i].y == y)
             return true;
        }
        return false;
    }

    $(document).keydown(function(e) {
        var key = e.which;
        if(key == "37" && d != "right") d = "left";
        else if(key == "38" && d != "down") d = "up";
        else if(key == "39" && d != "left") d = "right";
        else if(key == "40" && d != "up") d = "down";
    })
}

Answer 1

你的画布就像一个图像，如果用css缩放它，图形就会向上扩展。使用javascript设置画布的高度和高度。

var canvas = document.getElementsByTagName('canvas')[0];
canvas.width  = 450;
canvas.height = 450;

这是一个重复的顺便说一句。 Canvas width and height in HTML5

Answer 2

对于画布，属性width和height不是可选的。可能它正在调整＆＃34;默认＆＃34;值。

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html

＆＃39; width属性默认为300，height属性默认为150.＆＃39;

<canvas id = "canvas" class = "center" width="450" height="400"></canvas>

Answer 3

我同意Spoeken，你可以随时使用html或javascript来轻松改变大小。

 <canvas id="canvas" class="canvas" width="500px" height="450px" style= css stuff here> </canvas>

我发现以这种方式编辑和创建画布要容易得多。

为什么我的游戏大小不同取决于我如何设置画布的大小

3 个答案: