畫布上的畫線點綴着

Question

我試圖在彩虹筆畫畫布上工作，但每當我畫畫時，線條都會出現點綴。 只有當我移動得非常慢時才能正常顯示。

'mousemove'事件監聽器，實際上無法檢測到快速更改，或者我的代碼中是否存在其他問題？ 此外，這里是codepen鏈接，如果有人想要一個工作程序。

這是codepen！

 const canvas = document.querySelector('#draw'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; var ctx = canvas.getContext("2d"); ctx.lineWidth = 50; ctx.lineCap = "round"; ctx.lineJoin = "line"; ctx.strokeStyle = 0; let hue = 0; var [x, y] = [0, 0]; let paint = false; canvas.addEventListener('mousedown', beginDraw); function beginDraw(e) { paint = true; [x, y] = [ex, ey]; // ctx.moveTo(x, y); } canvas.addEventListener('mousemove', draw); function draw(e) { if (paint == false) return; ctx.strokeStyle = `hsla(${hue}, 100%, 50%, 0.5)`; ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(ex, ey); ctx.stroke(); [x, y] = [ex, ey]; hue++; } canvas.addEventListener('mouseup', endDraw); function endDraw() { paint = false; } 

 <canvas id="draw"></canvas> 

Answer 1

我認為問題是你的hsla函數的顏色不透明。 因為它設置為0.5，所以您有一些透明度，因為您為每個鼠標移動繪制一條線，用於繪制每個鼠標移動事件的起點和終點。 有時這些點相互重疊。

您可以刪除透明度並將其保持為1.在這種情況下，您不再會看到一個上方繪制2個點的位置，使其他人更容易看到顏色。

ctx.strokeStyle = `hsla(${hue}, 100%, 50%, 1)`;

如果你不想在顏色變化時看到點，你需要制作更多顏色值，同時使用其他參數而不僅僅是色調參數，因為顏色步長可能很大，你可能會在顏色變化時看到邊緣。

Answer 2

mousemove事件處理程序每​​秒只觸發很多次。 在每次執行時，您的代碼都會從上一個鼠標位置繪制一條線到當前鼠標位置。 每個后續行部分重疊前一行。

對於慢速筆划，重疊幾乎為100％，因此您將看不到效果，但對於更快的筆划，重疊顯示為圓形。 由於您使用的是局部透明度，因此線條重疊的點變得更暗，這會導致您看到的“虛線”效果。

如果將不透明度設置為1，效果將消失。