當我移動鼠標時，如何用 HTML 畫布繪制一條簡單的直線？

Question

我想隨着鼠標的移動畫一條直線。 我讓它工作了。 但問題是canvas.stroke在我移動鼠標時一遍又一遍地重繪線條。 解決方法是什么？ 我只想要一條線而不是多條線的疊加。

這是mousemove偵聽器：

canvasElement.onmousemove = (e) => {
            if (!started) return;
            context.beginPath();

            context.globalCompositeOperation = "multiply"; //<<<<
            context.globalAlpha = 0.05;
            context.lineWidth = size;
            context.strokeStyle = color;
            context.lineJoin = "round";
            context.lineCap = "round";
            context.moveTo(prvX, prvY);
            var dx = e.offsetX - prvX;
            var dy = e.offsetY - prvY;
            if (Math.abs(dx) > Math.abs(dy)) {
                context.lineTo(e.offsetX, prvY);
            } 
            context.stroke();
            context.closePath();
        };

Answer 1

一旦您在畫布上繪制的東西（例如圖像）上繪制了一些東西，例如一條線，為您的畫布存儲的結果像素數據就是舊數據和新數據的組合。 這意味着您不能簡單地從中刪除半透明線而不破壞下面繪制的內容。

一種解決方案是使用兩個大小相同且屏幕位置相同的獨立畫布。 背景中的畫布保存您的原始圖像數據，頂部的畫布用於繪制線條。 這樣，您可以在繪制新線之前簡單地擦除頂部畫布。

但是，在您使用不同的globalCompositeOperation畫線時，這可能不起作用。 在這種情況下，我建議您在第一次單擊“繪畫”畫布后立即將畫布的數據存儲在第二個畫布中。 這樣，您可以在繪制線之前簡單地恢復數據。

例如：

 let canvasElement = document.getElementById("canvas"); let context = canvasElement.getContext("2d"); let started = false; let size = 7; let color = "red" let prvX = 0; let prvY = 0; let image = new Image(); let backupCanvas = document.createElement("canvas"); let backupCanvasContext = backupCanvas.getContext("2d"); backupCanvas.width = canvasElement.width; backupCanvas.height = canvasElement.height; let backupCreated = false; image.crossOrigin = "anonymous"; image.onload = () => { context.drawImage(image, 0, 0, canvasElement.width, canvasElement.height); } image.src = `https://api.codetabs.com/v1/proxy?quest=https://picsum.photos/id/237/${canvasElement.width}/${canvasElement.height}`; canvasElement.onmousedown = (e) => { if (!backupCreated) { backupCanvasContext.drawImage(canvasElement, 0, 0, canvasElement.width, canvasElement.height); backupCreated = true; } started = true; prvX = e.offsetX; prvY = e.offsetY; } canvasElement.onmouseup = (e) => { started = false; } canvasElement.onmousemove = (e) => { if (!started) return; context.globalCompositeOperation = "source-over"; context.drawImage(backupCanvas, 0, 0, canvasElement.width, canvasElement.height); context.beginPath(); context.globalCompositeOperation = "multiply"; //<<<< context.globalAlpha = 1; context.lineWidth = size; context.strokeStyle = color; context.lineJoin = "round"; context.lineCap = "round"; context.moveTo(prvX, prvY); var dx = e.offsetX - prvX; var dy = e.offsetY - prvY; if (Math.abs(dx) > Math.abs(dy)) { context.lineTo(e.offsetX, prvY); } context.stroke(); context.closePath(); };

 <canvas id="canvas" width="300" height="200"></canvas>