用畫布繪製得到「鋸齒」

Question

我正在繪製HTML5（畫布）應用程序，它的工作正常，除此之外，您繪製的圖形有點「鋸齒」，並不像我想要的那樣光滑。以下是代碼;這裏有什麼問題？

$(function() { 
    var letsdraw = false; 

    var theCanvas = document.getElementById('paint'); 
    var ctx = theCanvas.getContext('2d'); 
    theCanvas.width = 420; 
    theCanvas.height = 300; 

    var canvasOffset = $('#paint').offset(); 

    $('#paint').mousemove(function(e) { 
     if (letsdraw === true) { 
      ctx.lineTo(e.pageX - canvasOffset.left, e.pageY - canvasOffset.top); 
      ctx.stroke(); 
     } 
    }); 

    $('#paint').mousedown(function() { 
     letsdraw = true; 
     ctx.strokeStyle = 'blue'; 
     ctx.lineWidth = 10; 
     ctx.lineCap = 'round'; 
     ctx.beginPath(); 
     ctx.moveTo(e.pageX - canvasOffset.left, e.pageY - canvasOffset.top); 
    }); 

    $(window).mouseup(function() { 
     letsdraw = false; 
    }); 
}); 

Answer 1

使用shadowBlur可以使它看起來更好。看到這個：http://jsfiddle.net/diode/EsYqm/6/。您必須使用lineWidth來調整模糊設置。

但對於一個完美的解決方案，你將不得不開發一種算法，用於平滑線，像這樣http://courses.engr.illinois.edu/ece390/archive/archive-f2000/mp/mp4/anti.html