我想隨著滑鼠的移影片一條直線。我讓它作業了。但問題是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();
};
uj5u.com熱心網友回復：
一旦您在畫布上繪制的東西（例如影像）上繪制了一些東西，例如一條線，為您的畫布存盤的結果像素資料就是舊資料和新資料的組合。這意味著您不能簡單地從中洗掉半透明線而不破壞下面繪制的內容。
一種解決方案是使用兩個大小相同且螢屏位置相同的獨立畫布。背景中的畫布保存您的原始影像資料，頂部的畫布用于繪制線條。這樣，您可以在繪制新線之前簡單地擦除頂部畫布。
但是，在您的情況下，這可能不起作用，因為您正在使用不同的方法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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/494038.html
標籤：javascript html 帆布
下一篇：硒，滾動頁面