HTML5 Canvas und Anti-Aliasing

Question

So aktivieren Sie die Anti-Aliasing auf einem Leinwand.

Der folgende Code keine glatte Linie zeichnen:

var context = mainCanv.getContext("2d"); 
if (context) { 
    context.moveTo(0,0); 
    context.lineTo(100,75); 

    context.strokeStyle = "#df4b26"; 
    context.lineWidth = 3; 
    context.stroke(); 
} 

Answer 1

Anti-Aliasing kann nicht ein- oder ausgeschaltet werden, und wird durch den Browser gesteuert.

Can I turn off antialiasing on an HTML <canvas> element?

Answer 2

Ich habe nicht auf Anti-Aliasing drehen benötigt, da es standardmäßig aktiviert ist, aber ich habe benötigt, um sie auszuschalten. Und wenn es ausgeschaltet werden kann, kann es auch eingeschaltet werden.

ctx.imageSmoothingEnabled = true; 

Ich schließe es in der Regel aus, wenn ich arbeite an meiner Leinwand so rpg, wenn ich in den Bildern heran nicht verschwommen aussehen.

Answer 3

Hier ist ein Workaround, bei dem Sie Linien Pixel für Pixel zeichnen müssen, aber Anti-Aliasing verhindern.

// some helper functions 
// finds the distance between points 
function DBP(x1,y1,x2,y2) { 
    return Math.sqrt((x2-x1)*(x2-x1)+(y2-y1)*(y2-y1)); 
} 
// finds the angle of (x,y) on a plane from the origin 
function getAngle(x,y) { return Math.atan(y/(x==0?0.01:x))+(x<0?Math.PI:0); } 
// the function 
function drawLineNoAliasing(ctx, sx, sy, tx, ty) { 
    var dist = DBP(sx,sy,tx,ty); // length of line 
    var ang = getAngle(tx-sx,ty-sy); // angle of line 
    for(var i=0;i<dist;i++) { 
     // for each point along the line 
     ctx.fillRect(Math.round(sx + Math.cos(ang)*i), // round for perfect pixels 
        Math.round(sy + Math.sin(ang)*i), // thus no aliasing 
        1,1); // fill in one pixel, 1x1 
    } 
} 

Grundsätzlich man die Länge der Zeile zu finden, und Schritt für Schritt Verfahrweg dieser Linie, um jede Position Abrunden, und in einem Pixel zu füllen.

Nennen Sie es mit

var context = cv.getContext("2d"); 
drawLineNoAliasing(context, 20,30,20,50); // line from (20,30) to (20,50) 

Answer 4

Sie Leinwand von Halbpixelabstand übersetzen kann.

ctx.translate(0.5, 0.5); 

Anfänglich der Leinwandpositionierungspunkt zwischen den physischen Pixeln.

Answer 5

Wenn Sie Pixel-Level-Kontrolle über Canvas benötigen, können Sie createImageData und putImageData verwenden.

HTML:

<canvas id="qrCode" width="200", height="200"> 
    QR Code 
</canvas> 

und JavaScript:

function setPixel(imageData, pixelData) { 
    var index = (pixelData.x + pixelData.y * imageData.width) * 4; 
    imageData.data[index+0] = pixelData.r; 
    imageData.data[index+1] = pixelData.g; 
    imageData.data[index+2] = pixelData.b; 
    imageData.data[index+3] = pixelData.a; 
} 

element = document.getElementById("qrCode"); 
c = element.getContext("2d"); 

pixcelSize = 4; 
width = element.width; 
height = element.height; 


imageData = c.createImageData(width, height); 

for (i = 0; i < 1000; i++) { 
    x = Math.random() * width/pixcelSize | 0; // |0 to Int32 
    y = Math.random() * height/pixcelSize| 0; 

    for(j=0;j < pixcelSize; j++){ 
    for(k=0;k < pixcelSize; k++){ 
    setPixel(imageData, { 
     x: x * pixcelSize + j, 
     y: y * pixcelSize + k, 
     r: 0 | 0, 
     g: 0 | 0, 
     b: 0 * 256 | 0, 
     a: 255 // 255 opaque 
     }); 
     } 
    } 
} 

c.putImageData(imageData, 0, 0); 

Working sample here