编辑:在功能更强大的计算机上运行代码并正确呈现网格。可能的硬件限制?出现问题的计算机是 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 变量,它正在读取正确的数字。真的不知道我在这里搞砸了什么。
最佳答案
HTML Canvas 具有最大渲染区域,具体取决于您的浏览器和硬件。
一旦您超出了这些限制,您就大功告成了。
尝试预渲染或使用多个通过 CSS 定位的 Canvas 。
关于javascript - HTML5 Canvas 不会在任何方向绘制超过 2040 年的线条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30177445/