Рисунок с холстом становится "зубчатым" - PullRequest
Новая
       7

Рисунок с холстом становится "зубчатым"

0 голосов
/ 07 января 2012

Я работаю над приложением для рисования с 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;
    });
});

1 Ответ

2 голосов
/ 07 января 2012

Используя shadowBlur, вы можете сделать его лучше. Смотрите это: http://jsfiddle.net/diode/EsYqm/6/. Вы должны настроить параметры размытия с помощью lineWidth.

Но для идеального решения вам придется разработать алгоритм сглаживания линии, например, http://courses.engr.illinois.edu/ece390/archive/archive-f2000/mp/mp4/anti.html

...