html5 canvas正确绘制一个立方体

Question

我正在尝试HTML5画布，并且正在尝试正确绘制等距的立方体

这是我当前绘制等距立方体的代码：

function drawCube(x, y, wx, wy, h, color) {
    // left face
    ctx.beginPath();
    ctx.moveTo(x, y);
    ctx.lineTo(x - wx, y - wx * 0.5);
    ctx.lineTo(x - wx, y - h - wx * 0.5);
    ctx.lineTo(x, y - h * 1);
    ctx.closePath();
    ctx.fillStyle = "#838357"
    ctx.strokeStyle = "#7a7a51";
    ctx.stroke();
    ctx.fill();

    // right face
    ctx.beginPath();
    ctx.moveTo(x, y);
    ctx.lineTo(x + wy, y - wy * 0.5);
    ctx.lineTo(x + wy, y - h - wy * 0.5);
    ctx.lineTo(x, y - h * 1);
    ctx.closePath();
    ctx.fillStyle = "#6f6f49";
    ctx.strokeStyle = "#676744";
    ctx.stroke();
    ctx.fill();

    // center face
    ctx.beginPath();
    ctx.moveTo(x, y - h);
    ctx.lineTo(x - wx, y - h - wx * 0.5);
    ctx.lineTo(x - wx + wy, y - h - (wx * 0.5 + wy * 0.5));
    ctx.lineTo(x + wy, y - h - wy * 0.5);
    ctx.closePath();
    ctx.fillStyle = "#989865";
    ctx.strokeStyle = "#8e8e5e";
    ctx.stroke();
    ctx.fill();
}

我对此有两个问题：

首要问题

---

缩放画布时，您会看到一些像素问题/面部重叠：

 var canvas = document.createElement("canvas"); var ctx = canvas.getContext('2d'); canvas.width = 800; canvas.height = 800; document.body.appendChild(canvas); function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); var sizeX = 32; var sizeY = 32; var sizeZ = 8; ctx.scale(5, 5); drawCube(50, 50, sizeX, sizeY, sizeZ); } requestAnimationFrame(draw); function drawCube(x, y, wx, wy, h, color) { // left face ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x - wx, y - wx * 0.5); ctx.lineTo(x - wx, y - h - wx * 0.5); ctx.lineTo(x, y - h * 1); ctx.closePath(); ctx.fillStyle = "#838357" ctx.strokeStyle = "#7a7a51"; ctx.stroke(); ctx.fill(); // right face ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x + wy, y - wy * 0.5); ctx.lineTo(x + wy, y - h - wy * 0.5); ctx.lineTo(x, y - h * 1); ctx.closePath(); ctx.fillStyle = "#6f6f49"; ctx.strokeStyle = "#676744"; ctx.stroke(); ctx.fill(); // center face ctx.beginPath(); ctx.moveTo(x, y - h); ctx.lineTo(x - wx, y - h - wx * 0.5); ctx.lineTo(x - wx + wy, y - h - (wx * 0.5 + wy * 0.5)); ctx.lineTo(x + wy, y - h - wy * 0.5); ctx.closePath(); ctx.fillStyle = "#989865"; ctx.strokeStyle = "#8e8e5e"; ctx.stroke(); ctx.fill(); } 

第二期

---

如何找出绘制整个立方体所需的画布宽度/高度，然后将立方体设置为画布的开头？ （x＆y = 0）

我在第一个问题上做错了什么？ 那第二个呢？ 我可以得到解决这些问题的示例/摘要吗？

Answer 1

它与线连接的斜接模式和斜接限制有关。

您可以通过调用fill() / stroke()来解决这两种方法：

降低斜接限制（请注意，斜接限制不能为0）：

ctx.miterLimit = 1;

或使用其他线联接模式：

ctx.lineJoin = "round";

 var canvas = document.createElement("canvas"); var ctx = canvas.getContext('2d'); canvas.width = 800; canvas.height = 800; document.body.appendChild(canvas); function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); var sizeX = 32; var sizeY = 32; var sizeZ = 8; ctx.scale(5, 5); drawCube(50, 50, sizeX, sizeY, sizeZ); } requestAnimationFrame(draw); function drawCube(x, y, wx, wy, h, color) { // LINE MODE ctx.lineJoin = "round"; // left face ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x - wx, y - wx * 0.5); ctx.lineTo(x - wx, y - h - wx * 0.5); ctx.lineTo(x, y - h * 1); ctx.closePath(); ctx.fillStyle = "#838357" ctx.strokeStyle = "#7a7a51"; ctx.stroke(); ctx.fill(); // right face ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x + wy, y - wy * 0.5); ctx.lineTo(x + wy, y - h - wy * 0.5); ctx.lineTo(x, y - h * 1); ctx.closePath(); ctx.fillStyle = "#6f6f49"; ctx.strokeStyle = "#676744"; ctx.stroke(); ctx.fill(); // center face ctx.beginPath(); ctx.moveTo(x, y - h); ctx.lineTo(x - wx, y - h - wx * 0.5); ctx.lineTo(x - wx + wy, y - h - (wx * 0.5 + wy * 0.5)); ctx.lineTo(x + wy, y - h - wy * 0.5); ctx.closePath(); ctx.fillStyle = "#989865"; ctx.strokeStyle = "#8e8e5e"; ctx.stroke(); ctx.fill(); } 

对于第二个问题，您可以预先计算多维数据集的所有值，并将它们存储在数组或对象等中。

然后在每个轴的所有值上运行min-max。 最大值（负最小值）将是画布的宽度/高度。 将画布放在-minX，-minY处（或使用相同的位置进行翻译）。