Question

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

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); 
    }**

Answer 1

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

评论此行：

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

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

请参阅demo。

如何用帆布创建方格背景

1 个答案: