用画布绘图变得“锯齿状”答案

【问题标题】：Drawing with canvas gets "jagged"用画布绘图变得“锯齿状”
【发布时间】：2012-01-07 15:29:19
【问题描述】：

我正在开发一个带有 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;
    });
});

【问题讨论】：

Drawing GOOD LOOKING (like in Flash) lines on canvas (HTML5) - possible?的可能重复
不，我不会称它为复制品。你在网上看到的画布绘图应用程序比我的要流畅得多。我的代码实际上有问题，我不想让它比平均水平更好。

标签： jquery html canvas drawing

【解决方案1】：

使用shadowBlur 可以让它看起来更好。看到这个：http://jsfiddle.net/diode/EsYqm/6/。您必须使用lineWidth 调整模糊设置。

但要获得完美的解决方案，您必须开发一种平滑线的算法，例如 http://courses.engr.illinois.edu/ece390/archive/archive-f2000/mp/mp4/anti.html

【讨论】：