用画布绘制得到“锯齿”

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