HTML5 Холст и сглаживание

Question

Как включить сглаживание на холст.

Следующий код не рисует плавную линию:

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

Сглаживание не может быть включен или выключен, и управляется с помощью браузера.

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

Answer 2

мне не нужно, чтобы включить анти-псевдоним, потому что это по умолчанию, но я нуждался, чтобы выключить его. И если его можно отключить, он также может быть включен.

ctx.imageSmoothingEnabled = true; 

я обычно выключить его, когда я работаю на мой холст рпг так, когда я приближать изображения не выглядят размытыми.

Answer 3

Вот обходное решение, которое требует от вас рисования линий по пикселям, но предотвратит сглаживание.

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

В принципе, вы найти длину линии, и шаг за шагом хода этой линии, округляя каждую позицию, и заполнение в пикселе.

Вызов его с

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

Answer 4

Вы можете перевести холст на расстоянии половины пикселей.

ctx.translate(0.5, 0.5); 

Первоначально точка позиционирования холста между физическими пикселями.

Answer 5

Если вам нужен контроль над уровнем содержимого на уровне пикселей, вы можете использовать createImageData и putImageData.

HTML:

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

И 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