如何在 HTML5 Canvas 中禁用形状抗锯齿？ （imageSmoothingEnabled 和像素化不起作用）[重复]

Question

我正在尝试将一些 2D 形状渲染到按比例放大的低分辨率画布上。为此，我正在使用画布的 2d 上下文函数“beginPath”、“moveTo”、“lineTo”和“fill”。但是我体验到，我正在渲染的每个形状都将在形状边缘使用抗锯齿进行渲染，在这种情况下我不需要并且想要。

我尝试通过设置“context.imageSmoothingEnabled = false”来禁用图像平滑，并将“图像渲染：像素化”添加到画布的样式中，但这些似乎都没有帮助。有没有办法在没有抗锯齿的情况下渲染形状，或者不能禁用此功能。如果不是这样就很糟糕了。

function drawOne(){
    var canvas = document.getElementById("canvas");
    canvas.style.imageRendering = "pixelated";
    		
    var ctx = canvas.getContext("2d");
    ctx.imageSmoothingEnabled = false;
	
    ctx.beginPath();
    ctx.moveTo(2, 2);
    ctx.lineTo(30, 10);
    ctx.lineTo(12, 30);
    ctx.closePath();
    ctx.fillStyle = "#FF0000";
    ctx.fill();
}

drawOne();

<canvas id="canvas" width="32" height="32" style="width:512px;height:512px;background-color:#000000;"></canvas>

一些附加信息：我正在尝试实现一个 3D 仿射纹理映射器（就像好的 ol PSone），因此需要画布上下文的本机渲染性能。

Answer 1

没有标准功能，但我在您的代码中添加了几行来模拟它：https://jsfiddle.net/pgnksbmu/

            for (var y = 0; y < 32; y++) {
                for (var x = 0; x < 32; x++) {
                if (ctx.isPointInPath(x + 0.5, y + 0.5)) {
                    ctx.fillRect(x, y, 1, 1);
                }
              }
            }