如何禁用形状抗锯齿在HTML5画布？ （imageSmoothingEnabled＆像素化不工作）[重复]

Question

这个问题已经在这里有一个答案：

• HTML5 Canvas and Anti-aliasing 7个回答

我想呈现一些2D形状按比例放大低分辨率画布。我使用的是帆布的2D背景的功能“beginPath方法”的“moveTo”的“lineTo”和“补”用于这一目的。不过，我经历了各种形状，我将渲染反锯齿会上我不要在此情况下，需要和想要的形状边缘呈现。

我试图通过设置“context.imageSmoothingEnabled =假”以禁用imagesmoothing并添加“图像渲染：像素化”到画布的风格，但这些都不似乎帮助。有没有一种方法来呈现的形状没有抗锯齿或无法此功能被禁用。如果没有这将是非常糟糕的。

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仿射纹理映射器（像好醇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);
                }
              }
            }