HTML5畫布線 - 我如何讓它們看起來更流暢？

我想製作線條，但它們有鋒利的邊緣，例如如果你用這條線寫一個字。在Photoshop中，您可以使用不太清晰的畫筆，也可以採用高分辨率和縮小畫面。 HTML5畫布線也有不錯的訣竅嗎？HTML5畫布線 - 我如何讓它們看起來更流暢？

 canvas.addEventListener('mousemove', function(e) { 
     this.style.cursor = 'pointer'; 
     if(this.down) { 
      with(ctx) { 
       beginPath(); 
       moveTo(this.X, this.Y); 
       lineTo(e.pageX , e.pageY); 
       strokeStyle = red; 
       ctx.lineWidth=1; 
       stroke(); 
      } 
      this.X = e.pageX ; 
      this.Y = e.pageY ; 
     } 
    }, 0);

來源

2013-03-24 vuvu

可能的重複[繪畫GOOD LOOKING（就像在Flash中）畫布上的線（HTML5） - 可能嗎？]（http://stackoverflow.com/questions/4179069/drawing-good-looking-like-in-flash- line-on-canvas-html5-possible） – JJJ 2013-03-24 17:19:14

@Juhana ......不，不一樣的東西;） – markE 2013-03-24 17:55:59

正如你已經發現，當你讓用戶繪製鼠標移動你結束了，吸引了非常鋸齒線點列表的折線。

你需要做的是：

減少點
的數量保持生成的路徑真實用戶的預期的形狀。

所以，你想從進入「後」「前」：

enter image description here

的拉默 - 道格拉斯 - 普克多邊形簡化算法

您可以通過使用做到這一點Ramer-Douglas-Peucker（RDP）多邊形簡化算法。它減少了折線的「鋸齒」，同時保持了預期路徑的本質。

這裏是RDP是如何工作的，什麼是能夠實現的概述：http://ianqvist.blogspot.com/2010/05/ramer-douglas-peucker-polygon.html

這裏是RDP算法感謝馬修·泰勒的JavaScript的執行力度：https://gist.github.com/rhyolight/2846020

在馬修的執行力度「小量」是一個數字，表示你想要如何接近原始的「鋸齒狀」。

來源

2013-03-24 17:52:54 markE

好，如果想減少點數。但我想我想要一個不同的渲染，就好像我有更高的分辨率。 – vuvu 2013-03-24 20:57:56

HTML5畫布線 - 我如何讓它們看起來更流暢？

回答

相關問題