HTML5帆布貝塞爾塗抹

我有一個HTML 5畫布，並在其上使用BezierTo筆觸。HTML5帆布貝塞爾塗抹

順時針移動鼠標/目標時，我遇到了「拖尾」問題。逆時針做同樣的事情不會引起任何問題。

我不明白爲什麼我得到填充類型的效果，而不是一條線。沒有人似乎有這個問題。

爲曲線的代碼是：

ctx.strokeStyle = "#D43"; 
ctx.lineWidth = 8 * scale; 
ctx.beginPath(); 
ctx.moveTo(379 * scale, 473 * scale); 

var xDif = 379 - redProbeX ; 
var yDif = 473 - redProbeY ; 

ctx.bezierCurveTo( 
    (379 - xDif/3 + 38) * scale, (473 - yDif * 2/5 + 250) * scale, 
    (379 - xDif * 3/5 + 38) * scale, (473 - yDif * 2/3 + 250) * scale, 
    (redProbeX + 38 * scale) , (redProbeY + 250 * scale)); 
ctx.stroke();

你可以看到拖尾在這個視頻：http://aaronkuchma.ca/bezierToSmear.mp4

畫布通常重繪順利;然而，當CamStudio捕捉視頻時，它仍然滯後。這是我在另一個時間處理的問題。

來源

2014-01-05 user3085196

看起來您在繪製新筆畫之前並未正確刪除筆畫。這個問題似乎超出了你發佈的代碼。 – Philipp

也別忘了使用closePath。（在中風之前或之後），否則路徑將堆積並且長期放慢顯示。 – GameAlchemist

只需添加

ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height)

在你的代碼的頂部，它應該工作。

來源

2014-01-06 14:00:16 hobberwickey

HTML5帆布貝塞爾塗抹

回答

相關問題