HTML5画布绘制时显示线条

【问题标题】：HTML5 canvas Showing lines when drawingHTML5画布绘制时显示线条
【发布时间】：2020-04-22 05:59:28
【问题描述】：

在绘制瓦片地图并将瓦片宽度设置为$(window).width() / 10 并将瓦片高度设置为$(window).height() / 10 时遇到问题

画布在每个图块之间绘制额外的线条

这是代码：https://jsfiddle.net/t68sgrf3/

【问题讨论】：

似乎是一个四舍五入的问题。确保画布高度和宽度设置为可被 10 整除的数字。
@junvar 你知道如何自动将画布高度和宽度设置为可被 10 整除的数字
<canvas width=1000 height=1000></canvas>

标签： javascript html canvas jstilemap

【解决方案1】：

这是一个带有 500x503 尺寸画布的示例。请注意，高度不能被 10 整除，因此我们得到了不正确的背景水平线。而宽度可以被 10 整除，我们看不到这样的垂直线。

let canvas = document.querySelector('canvas');
let ctx = canvas.getContext("2d");

let width = canvas.width / 10;
let height = canvas.height / 10;
console.log(width, height);

ctx.fillStyle = '#000';
ctx.fillRect(0, 0, canvas.width, canvas.height);

for (let x = 0; x < 10; x++)
  for (let y = 0; y < 10; y++) {
    ctx.fillStyle = (x + y) % 2 ? '#ffe' : '#eef';
    ctx.fillRect(x * width, y * height, width, height);
  }

canvas {
  outline: 1px solid;
}

&lt;canvas width=500 height=503&gt;&lt;/canvas&gt;

【讨论】：