沒有模糊的線

當 Canvas 繪製一條線時，它會自動新增抗鋸齒以在視覺上修復鋸齒狀。結果是線條不那麼鋸齒但更模糊。

此函式使用 Bresenham’s_line 演算法在 2 個點之間繪製一條沒有抗鋸齒的線。結果是沒有鋸齒狀的清晰線條。

重要說明： 這種逐畫素的方法比 context.lineTo 慢得多。

// Usage:
bresenhamLine(50,50,250,250);

// x,y line start
// xx,yy line end
// the pixel at line start and line end are drawn
function bresenhamLine(x, y, xx, yy){
    var oldFill = ctx.fillStyle;  // save old fill style
    ctx.fillStyle = ctx.strokeStyle; // move stroke style to fill
    xx = Math.floor(xx);
    yy = Math.floor(yy);
    x = Math.floor(x);
    y = Math.floor(y);
    // BRENSENHAM 
    var dx =  Math.abs(xx-x); 
    var sx = x < xx ? 1 : -1;
    var dy = -Math.abs(yy-y);
    var sy = y<yy ? 1 : -1; 
    var err = dx+dy;
    var errC; // error value
    var end = false;
    var x1 = x;
    var y1 = y;

    while(!end){
       ctx.fillRect(x1, y1, 1, 1); // draw each pixel as a rect
        if (x1 === xx && y1 === yy) {
            end = true;
        }else{
            errC = 2*err;
            if (errC >= dy) { 
                err += dy; 
                x1 += sx; 
            }
            if (errC <= dx) { 
                err += dx; 
                y1 += sy; 
            } 
        }
    }
    ctx.fillStyle = oldFill; // restore old fill style
}