javascript - HTML5画布绘制时显示线条

Question

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

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

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

Answer 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;
}

<canvas width=500 height=503></canvas>