如何在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);
                }
              }
            }