我正在开发免费的绘画画布。它有两个工具。用于绘制的画笔和橡皮擦。默认情况下，画笔是选中的，用户可以绘制。通过从下拉菜单中选择橡皮擦，我将“ globalcompositeoperation”更改为“ destination-out”；用户可以擦除。到目前为止，一切都很好。但是当用户将工具改回画笔模式时，（ctx.globalcompositeoperation =“ source-over”）无效，并且橡皮擦永远保持激活状态！如何正确在刷子和橡皮擦之间切换。谢谢
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
Tool:
<select id="tool">
<option value="brush">Brush</option>
<option value="eraser">Eraser</option>
</select>
<canvas id="canvas"></canvas>
<script>
window.addEventListener("load", () => {
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
canvas.height = window.innerHeight - 8;
canvas.width = window.innerWidth - 8;
ctx.strokeStyle = "black";
ctx.lineWidth = 10;
ctx.shadowBlur = 10;
ctx.shadowColor = "rgb(0, 0, 0)";
ctx.lineJoin = "round";
ctx.lineCap = "round";
let painting = false;
function startPosition(e) {
painting = true;
draw(e);
}
function finishedPosition() {
painting = false;
ctx.beginPath();
}
function draw(e) {
if (!painting) return;
ctx.lineTo(e.clientX, e.clientY);
ctx.stroke();
}
canvas.addEventListener("mousedown", startPosition);
canvas.addEventListener("mouseup", finishedPosition);
canvas.addEventListener("mousemove", draw);
var select = document.getElementById("tool");
select.addEventListener("change", function () {
mode = select.value;
if (mode == "brush") {
// this can't bring brush back!
ctx.globalcompositeoperation = "source-over";
console.log("brush");
} else {
// this changes brush to eraser successfully
ctx.globalCompositeOperation = "destination-out";
ctx.globalcompositeoperation = "source-over";
console.log("eraser");
}
});
});
</script>
</body>
</html>const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
canvas.height = window.innerHeight - 8;
canvas.width = window.innerWidth - 8;
ctx.strokeStyle = "black";
ctx.lineWidth = ctx.shadowBlur = 10;
ctx.shadowColor = "rgb(0, 0, 0)";
ctx.lineJoin = ctx.lineCap = "round";
let painting = false;
function startPosition(e) {
painting = true;
draw(e);
}
function finishedPosition() {
painting = false;
ctx.beginPath();
}
function draw(e) {
if (!painting) return;
ctx.lineTo(e.clientX, e.clientY);
ctx.stroke();
}
canvas.addEventListener("mousedown", startPosition);
canvas.addEventListener("mouseup", finishedPosition);
canvas.addEventListener("mousemove", draw);
var select = document.getElementById("tool");
select.addEventListener("change", function() {
mode = select.value;
if (mode == "brush") {
ctx.globalCompositeOperation = "source-over";
} else {
ctx.globalCompositeOperation = "destination-out";
}
});<!DOCTYPE html>
<html lang="en">
<body>
Tool:
<select id="tool">
<option value="brush">Brush</option>
<option value="eraser">Eraser</option>
</select>
<canvas id="canvas"></canvas>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
#c{
border: 2px black solid;
}
</style>
</head>
<body>
Tool:
<select id="tool">
<option value="brush">Brush</option>
<option value="eraser">Eraser</option>
</select>
<canvas id="canvas"></canvas>
<!-- <canvas id="c" width="500" height="300"></canvas> -->
<!-- <script src="./canvas.js"></script> -->
<script>
window.addEventListener("load", () => {
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
canvas.height = window.innerHeight - 8;
canvas.width = window.innerWidth - 8;
ctx.strokeStyle = "black";
ctx.lineWidth = 10;
ctx.shadowBlur = 10;
ctx.shadowColor = "rgb(0, 0, 0)";
ctx.lineJoin = "round";
ctx.lineCap = "round";
let painting = false;
let mode = 'brush'
function startPosition(e) {
painting = true;
draw(e);
}
function finishedPosition() {
painting = false;
ctx.beginPath();
}
function draw(e) {
if (!painting) return;
if(mode=='brush') {
ctx.globalCompositeOperation = 'source-over';
ctx.strokeStyle = 'black';
ctx.lineWidth = 3;
} else {
ctx.globalCompositeOperation = 'destination-out';
ctx.lineWidth = 10;
}
ctx.lineTo(e.clientX, e.clientY);
ctx.stroke();
}
canvas.addEventListener("mousedown", startPosition);
canvas.addEventListener("mouseup", finishedPosition);
canvas.addEventListener("mousemove", draw);
var select = document.getElementById("tool");
select.addEventListener("change", function () {
mode = select.value;
});
});
</script>
</body>
</html>