Question

大家好。我有一个红色背景的画布。在它上面我有几排盒子，它们完全相继。每个框都从前一个框结束的位置开始，它们都具有相同的偏斜。因此边缘之间不应有任何间隙，但正如您在示例中所看到的那样，存在间隙。

有谁知道为什么会这样，以及如何摆脱它。

console.clear();
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var world = {
  centerY: canvas.height / 2,
  centerX: canvas.width / 2
}
var rowCount = 14;
var box = {
  width: 20,
  height: 20,
  skew: 10
}

function drawBox(x, y, id) {
  ctx.save();
  ctx.beginPath();
  ctx.moveTo(x, y);
  ctx.lineTo(x + box.width, y);
  ctx.lineTo(x + box.width + box.skew, y - 20);
  ctx.lineTo(x + box.skew, y - box.height);
  ctx.lineTo(x, y);
  ctx.closePath();
  ctx.clip();
  ctx.clearRect(0,0, canvas.width, canvas.height);
  ctx.fillStyle = id % 2 == 0 ? 'lightgray' : 'darkgray';
  ctx.fill();
  ctx.restore();

}

for (var i = 0; i < 112; i++) {
  var k = Math.floor(i / rowCount) * rowCount;
  console.log(k);
  drawBox(i * box.width - (k * box.width), Math.floor(i / rowCount) * box.height, i)
}

#canvas {
  background-color: red;
  width: 800px;
  height: 600px;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <canvas id="canvas">

  </canvas>
</body>

</html>

Answer 1

在函数drawBox中更新：

  ctx.lineTo(x+box.width, y);
  ctx.lineTo(x+box.width + box.skew, y - 20);

要

ctx.lineTo(x+box.width+1, y);
ctx.lineTo(x+box.width + box.skew +1, y - 20);

HTML5 Canvas antialias

1 个答案: