javascript - HTML5 Canvas 不会在任何方向绘制超过 2040 年的线条

Question

编辑:在功能更强大的计算机上运行代码并正确呈现网格。可能的硬件限制？出现问题的计算机是 Samsung series 3 Chromebook。我认为这与尝试同时绘制太多线条有关。稍后测试。

我正在尝试使用 lineTo() 方法在 Canvas 上绘制网格。线条在开始时正确绘制，但任何完全超过 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 定位的 Canvas 。