HTML5 Canvas不会在任何一个方向上绘制超过2040的行

Question

编辑:在更强大的计算机上运行代码并正确呈现网格.可能的硬件限制？发生问题的计算机是三星系列3 Chromebook.我认为这与尝试同时绘制太多行有关.稍后会测试.

我正在尝试使用lineTo()方法在网格上绘制网格.这些线在开始时正确绘制,但是任何向下或向右绘制完全超过2048像素的线都不会显示.从这一点到内部的线仍然会出现在另一边,只是只有点过来的线才会显示出来.

这是我的JavaScript:

function drawGrid() {
        //data.tiles is the map stored as an array of arrays
        //tilesize = 60

        var bw = data.tiles[0].length * tilesize;
        var bh = data.tiles.length * tilesize;

        ctx.beginPath();

        for (i = bw; i >= 0; i -= tilesize) {
            ctx.moveTo(i, 0);
            ctx.lineTo(i, bh);
        }
        for (i = bh; i >= 0; i -= tilesize) {
            ctx.moveTo(0, i);
            ctx.lineTo(bw,i);
        }

        ctx.strokeStyle = "black";
        ctx.stroke();
    }

我检查了data.tiles变量,它正在读取正确的数字.真的不知道我搞砸了什么.

Answer 1

HTML Canvas 具有最大渲染区域，具体取决于您的浏览器和硬件。

一旦你超过了这些限制，你就已经做得很好了。

尝试预渲染或使用 CSS 定位的多个画布。