HTML5 canvas 绘图时显示线条

Question

我在绘制 tile-map 并将 tile 宽度设置为 $(window).width() / 10 并将 tile 高度设置为 $(window).height() / 10

时遇到问题

canvas 在每个图块之间绘制额外的线

Answer 1

这是一个 canvas 尺寸为 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>

HTML5 canvas 绘图时显示线条

HTML5 canvas Showing lines when drawing

html

javascript

canvas

jstilemap