帆布鋸齒狀邊緣的困境與行/招

Question

我有一個畫布上繪製線有點問題，

基本上我想要的線路是好的，柔軟，半不透明然而畫布似乎只想要用最後渲染的線段做這件事。

看看這裏，你會看到最後畫出的線段很好，而且我也很想看到它），但是隨着動畫的播放，先前繪製的線條會變得粗糙和討厭。

我注意到，如果我使用closepath這不然而發生，因爲間隔/動畫，我不能用這個每個渲染爲線，去所有的地方：

http://jsfiddle.net/xSPuM/1/

任何人有任何想法如何阻止這種情況發生，我會非常感激。

非常感謝 一個

Answer 1

奇怪的代碼！雖然這樣做的方式似乎有點獨特，但動畫是整潔的，所以讓我們來看看。

首先要清楚，當你製作一條路徑時，你可以繼續一遍又一遍地敲擊它。

所以，如果你有三條線段A，B，C的路徑，你做的事：

A，中風，B，中風，C，中風

你會得到段描邊3次，B撫摸了2次，C撫摸了一次。

這實際上是你在這裏做的。

可避免容易被你的路徑年底撫摸只有一次：

http://jsfiddle.net/xSPuM/5/

這將停止動畫，但說明是什麼問題。您可以通過清除屏幕來修復動畫。因此，與部分ABC，我們會做：

A，清晰，中風，B，清晰，中風，C，清晰，行程

然後你會得到段A撫摸一次，清屏和然後AB段被撫摸一次，屏幕最後一次被清除，所以ABC段被撫摸一次。這是你想要的。

問題在於清除屏幕意味着清除您之前繪製的所有形狀！在這裏看到：

http://jsfiddle.net/xSPuM/7/

有幾種方法來解決這個問題：

1. 保存當前的臨時畫布上繪製的對象（可能是棘手）
2. 保存以前繪製的狀態到一個臨時畫布（不那麼棘手）
3. 跟蹤三條路徑，就好像它們是一條路徑一樣（容易因此我會爲你做）

要做＃3我們所要做的並不是在每個新零件的開始處調用beginPath。相反，我們只在最開始時只撥打beginPath一次，每個新部分僅僅是一個moveTo操作！

http://jsfiddle.net/xSPuM/8/

這應該是足夠的信息，讓你在正確的軌道上！