HTML5 Canvas y Anti-aliasing

Question

Cómo activar el anti-aliasing en un canvas.

El siguiente código no dibuja una línea suave:

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 no puede ser encendido o apagado, y es controlada por el navegador.

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

Answer 2

No he necesitado para activar el suavizado porque está en forma predeterminada, pero he necesitado para apagarlo. Y si se puede apagar, también se puede encender.

ctx.imageSmoothingEnabled = true; 

por lo general lo apago cuando estoy trabajando en mi lienzo rpg por lo que cuando el zoom en las imágenes no se ven borrosas.

Answer 3

Aquí hay una solución alternativa que requiere dibujar líneas píxel por píxel, pero evitará el anti aliasing.

// 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 
    } 
} 

Básicamente, se encuentra la longitud de la línea, y paso a paso transversal esa línea, el redondeo de cada posición, y rellenando un píxel.

de llamadas con

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

Answer 4

Puede traducir la lona por la distancia de medio píxel.

ctx.translate(0.5, 0.5); 

Inicialmente el punto de posicionamiento del lienzo entre los píxeles físicos.

Answer 5

Si necesita control de nivel de píxel sobre lienzo, puede hacerlo usando createImageData y putImageData.

HTML:

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

y 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