1

我无法制作方格画布背景。屏幕目前显示充满整个屏幕的纯色。这个颜色就是两个循环else下语句中的fillStyle。for我使用模数运算符错了吗？或者是别的什么？

function createBackground(){
        if(!Modernizr.canvas) return;

        var canvas = document.createElement('canvas'),
            context = canvas.getContext('2d'),
            background = $('#game .background')[0],
            rect = background.getBoundingClientRect(), //returns the dimension of background
            gradient,
            monsterSize = monstr.settings.monsterSize;

        canvas.width = rect.width;
        canvas.height = rect.height;
        context.scale(rect.width, rect.height);

        /* create checker */
        cols = canvas.width / monsterSize;
        rows = canvas.height / monsterSize;

        console.log(cols); //8
        console.log(rows); //12
        console.log(monsterSize); //40
        for (var i=0; i<cols; i++){
            for (var j=0; j<rows; j++){
                if((i+j)% 2){ /* for every other block */
                    context.fillStyle = '#262626';
                    context.fillRect(i*monsterSize, j*monsterSize, monsterSize, monsterSize);
                } else {
                    context.fillStyle = '#E8E8E8';
                    context.fillRect(i*monsterSize, j*monsterSize, monsterSize, monsterSize);
                }
            };
        };

        /* add canvas to html element */
        background.appendChild(canvas); 
    }**
4

1 回答 1

2

您将画布缩放错误，使棋盘上的每个图块都变得如此之大，以至于您只能在屏幕上看到一个图块。

注释掉这一行：

context.scale(rect.width, rect.height);

或者尝试用较小的数字（如1,2等）替换您传递的值，具体取决于您想要的缩放量 - 如果您甚至需要缩放。

见演示。

于 2012-08-08T13:20:30.303 回答