html5 – 画布中用户绘制的线条

我正在使用< canvas>以签名的形式捕获用户输入,并尝试找出如何平滑鼠标的输入.

我想我需要通过块处理用户的鼠标移动块,平滑每个块,我不是在超级平滑之后,但对锯齿形输入的任何改进将是好的.

谢谢,
标记

解决方法

不知道这可能会帮助你,
我在几分钟内从头开始写这个代码.

试试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(/\,$/,')');
    }    
  };

原文地址：https://www.jb51.cc/html5/168147.html