画布三角形周围的无意轮廓[重复]

Question

我正在制作 3D 引擎，并注意到所绘制的每个形状周围都有一个轮廓。我尝试了几种方法来摆脱这个问题，比如画布CSS中的

image-rendering: pixelated;

，

ctx.imageSmoothingEnabled = false;

，我也尝试添加自己的轮廓，但这太滞后了。有什么办法可以解决这个问题吗？

plane made of triangles with an unwanted outline

我搜索了谷歌并询问了chatGPT，但他们都直接进入了我已经尝试过的内容。请帮忙。

您可以使用任何具有非垂直或水平线的形状来重现此问题，例如：

var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    ctx.beginPath();
    ctx.moveTo(200, 200);
    ctx.lineTo(300, 200);
    ctx.lineTo(300, 300);
    ctx.lineTo(200, 200);
    ctx.fillStyle = "white";
    ctx.fill();
    ctx.closePath();

    ctx.beginPath();
    ctx.moveTo(200, 200);
    ctx.lineTo(200, 300);
    ctx.lineTo(300, 300);
    ctx.lineTo(200, 200);
    ctx.fillStyle = "white";
    ctx.fill();
    ctx.closePath();
    
    //the triangles share two of the same points, yet there is still an outline/gap

* {
        margin: 0 auto;
    }

    canvas {
        background: black;
    }

<!DOCTYPE html>
<html>

<canvas id="myCanvas" width=500 height=500></canvas>

</html>

Answer 1

那条线是由

beginPath

closePath

画的，省略它们就可以了。

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.fillStyle = "white";
ctx.moveTo(200, 200);
ctx.lineTo(300, 200);
ctx.lineTo(300, 300);
ctx.lineTo(200, 200);
ctx.fill();

ctx.moveTo(200, 200);
ctx.lineTo(200, 300);
ctx.lineTo(300, 300);
ctx.lineTo(200, 200);
ctx.fill();

* {
  margin: 0 auto;
}

canvas {
  background: black;
}

<canvas id="myCanvas" width=500 height=500></canvas>

画布三角形周围的无意轮廓[重复]

问题描述投票：0回答：1

1个回答

最新问题

画布三角形周围的无意轮廓[重复]

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1