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

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

我知道这是一个 10 年前的问题，但我认为答案并不完整。为了获得平滑的线条效果，您需要为画布的上下文设置两个属性：

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

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

lineJoin 上的一些文档。
lineCap 上的一些文档。

Answer 3

我必须为移动网络应用程序绘制平滑的画布，并学到了一些东西。Avinash的答案很好，但如果增加线宽，绘制时会看到虚线。这是因为默认情况下线帽是矩形的。

为了使线条更平滑，您需要稍微调整一下。

ctx.lineCap = '圆形';

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

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

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