平滑免費在Html5畫布中繪圖

我正在實現使用HTML5畫布的免費繪圖。目前，每件事情都很好。我爲每個鼠標移動都使用moveTo（）和lineTo（）。我必須微調繪圖;平滑免費在Html5畫布中繪圖

當我繪製一些像快速運動的線條一樣的曲線時，繪圖將被繪製爲像直線的關節。有沒有其他的繪圖方式，使繪圖更平滑？

來源

2011-08-01 Kantesh

我不認爲這是爲繪圖本身更好的方法，但是，如果直接把平局功能集成到鼠標移動事件處理程序，那麼就會慢下來，

要速度了，你可以只需將事件處理程序中的座標保存在數組中，然後等待鼠標在走過數組和繪圖之前停止移動。

優勢在於事件被更加快速地調用，使得曲線更平滑，如果移動鼠標的話，缺點是會有'延遲'。

另一種方法是嘗試檢測用戶何時彎曲並使用合適的曲線繪製方法。

來源

2011-08-01 09:28:37 Johan

感謝您info..How關於使用貝塞爾曲線。？我們至少可以使線更平滑。 – Kantesh

貝塞爾曲線聽起來像是可以工作的，儘管如此，還沒有用過。 – Johan

我居然做了同樣的事情：

ctx.beginPath(); 
ctx.moveTo(lp.x-.5, lp.y-.5); // Last recorded position. 
ctx.lineTo(cp.x-.5, cp.y-.5); // Current position at time of call. 
ctx.stroke();

Bezier曲線是偉大的筆狀（路徑）的功能，但是我已經結束了與意想不到的結果爲好，即P0之間的曲線P2距離P1太遠......這可以通過添加額外的點來評估函數（將其提高到更高的程度，這似乎是adobe的做法）。

我花了兩天的時間回答這個問題，對最好的例子進行了大量的研究，在可用的代碼中撕掉代碼。基本上有兩個迴應：

1.）應用一個過濾器 - 一個盒子或高斯模糊會使粗糙的邊緣平滑一點，使它看起來沒有角度。

2.）應用貝塞爾曲線 - 在mousedown和mouseup事件之間，記錄一組點並應用曲線。線條越長，重新渲染越慢。（Muro - deviantArt的畫布應用似乎是這樣做的）。 [注意：如果這個想法是爲人們創建一個藝術的網絡應用程序，請向他們展示原始行，直到完成平滑呈現。]

我喜歡介於兩者之間的某個地方。輕微的模糊傾向於軟化東西，特別是在角落附近，並且使緩慢放置（因此頻繁，更短的線）更柔和）。

東西，我會增加，這可能是完全顯而易見的，所以我道歉：確保你設置你的帽子風格「圓」 - ctx.lineCap = 'round'

來源

2011-08-04 17:38:43 stslavik

平滑免費在Html5畫布中繪圖

回答

相關問題