在画布上平滑用户画出的线条

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

考虑通过线路连接点自动，甚至，用quadraticCurveTo，但是你必须自己计算的中间点。

Answer 3

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

Answer 4

如何使用Bezier curves？

Answer 5

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

为了使线更平滑，您需要调整一些东西。

ctx.lineCap ='round';

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

为了更多地了解这一点，请尝试以下链接

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