在畫布上平滑用戶畫出的線條

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