Question

我正在使用<canvas>以签名的形式捕获用户输入，并试图弄清楚如何平滑鼠标的输入。

我认为我需要按块处理用户的鼠标移动块并平滑每个块，我不是在超级平滑之后，但锯齿状输入的任何改进都会很好。

谢谢，标记

Answer 1

不确定这可能会对您有所帮助，我在几分钟内从头开始编写这段代码。

标记：

<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

我必须为移动Web应用程序制作一个平滑的画布，并学习几件事。 Answer of Avinash很棒但是如果你增加线宽，当你绘制时你会看到折线。这是因为默认情况下线帽是矩形的。

为了让线更流畅，你需要稍微调整一下。

ctx.lineCap ='round';

这个小小的调整会给你一个超级流畅的线条。

要了解更多相关信息，请尝试以下链接

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

Answer 3

如何使用Bezier curves？

Answer 4

我没有以任何方式对此进行测试，但您可以尝试使用径向填充渐变绘制小圆圈。

Answer 5

我知道这是一个已有10年历史的问题，但我认为答案还不完整。为了获得流畅的线条效果，您需要为画布的上下文设置两个属性：

context.lineCap = 'round'
context.lineJoin = 'round'

第一个用于一条路径的末端，第二个用于一条路径的拐角。

有些docs on lineJoin。
一些docs on lineCap。

Answer 6

考虑自动使用线条连接点，甚至使用quadraticCurveTo，但您必须自己计算中间点。

在画布中平滑用户绘制的线条

6 个答案: