Гладкие пользовательские линии на холсте

Question

Я использую <canvas> для захвата ввода пользователя в виде подписи и пытаюсь выяснить, как сгладить ввод с помощью мыши.

Я думаю, что мне нужно обработать мышь пользователядвижения с разбивкой на фрагменты и сглаживание каждого фрагмента, я не после супер сглаживания, но было бы хорошо улучшить неровные входные данные.

Спасибо, Марк

Answer 1

Не уверен, что это может вам помочь, я написал этот код с нуля за несколько минут.

Попробуйте http://jsbin.com/ateho3

разметка :

<canvas id="canvas"></canvas> 

JavaScript :

window.onload = function() {
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    var width  = window.innerWidth;
    var height = window.innerHeight;
    canvas.height = height;
    canvas.width = width;
    canvas.addEventListener('mousedown', function(e) {
      this.down = true;  
      this.X = e.pageX ;
      this.Y = e.pageY ;
      this.color = rgb();
    }, 0);
    canvas.addEventListener('mouseup', function() {
      this.down = false;      
    }, 0);
    canvas.addEventListener('mousemove', function(e) {
      this.style.cursor = 'pointer';
      if(this.down) {
          ctx.beginPath();
          ctx.moveTo(this.X, this.Y);
          ctx.lineCap = 'round';
           ctx.lineWidth = 3;
          ctx.lineTo(e.pageX , e.pageY );
          ctx.strokeStyle = this.color;
          ctx.stroke();

         this.X = e.pageX ;
         this.Y = e.pageY ;
      }
    }, 0);

    function rgb() {
      color = 'rgb(';
      for(var i = 0; i< 3; i++) {
        color += Math.floor(Math.random() * 255)+',';
      }
      return color.replace(/\,$/,')');
    }    
  };

Answer 2

Я должен был сделать гладкий рисунок холста для мобильного веб-приложения и научился нескольким вещам.Ответ от Avinash великолепен, но если вы увеличите ширину линии, то при рисовании вы увидите пунктирные линии.Это связано с тем, что ограничитель по умолчанию имеет прямоугольную форму.

Чтобы сделать линию более плавной, необходимо немного настроить ее.

ctx.lineCap = 'round';

этот небольшой твик даст вам супер плавную линию.

Чтобы узнать больше об этом, попробуйте следующую ссылку

https://developer.mozilla.org/samples/canvas-tutorial/4_6_canvas_linecap.html

Answer 3

Как насчет использования кривых Безье ?

Answer 4

Я не проверял это никоим образом, но вы можете попробовать нарисовать маленькие круги с радиальным градиентом заполнения.

Answer 5

Рассмотрите возможность подключения точек, используя линии автоматически, или даже используйте quadraticCurveTo, но вы должны вычислить среднюю точку самостоятельно.