Плавные рисованные линии пользователя в canvas

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

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

спасибо, Марк!--2-->

9
canvas html5

5 ответов

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

дайте ему попробовать 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(/\,$/,')');
    }    
  };
12

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

чтобы сделать линию более гладкой, вам нужно немного настроить что-то.

ctx.круглый lineCap ='';

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

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

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

4

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

3

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

1

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

0