javascript画布。在globalcompositeoperation之间切换
我正在开发一个免费的画布。它有两个工具。画笔画笔和橡皮擦。默认情况下，画笔被选中，用户可以绘制。通过从下拉菜单中选择“橡皮擦”，我将“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>共有1个答案
看来您有一个键入GlobalCompositeOperation。
记住JavaScript是区分大小写的语言。
下面是您的代码：
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>-
canvas可以在页面中设定一个区域，再利用JavaScript动态地绘制图像。 基本用法 使用canvas元素，首先设置width和height属性，为其设置绘制区域的大小， 如果没有设置宽度和高度，是看不到元素的，不能在其区域画图，在开始标签和结束标签之间的信息是后备信息，当用户的浏览器不支持canvas元素时会显示，用于友好地提示用户。 <canvas id="canvas" width
-
问题内容： 我有2个要用于修改相同数据的不同布局文件，我将切换到“编辑视图”的布局，该布局允许用户修改图形数据，然后允许他们切换回“详细视图” ”显示详细的图表（使用androidplot库）。 我的问题是，当切换回我的“编辑视图”时，我的图形线不见了，只绘制了轴（因此布局切换，而我的图形视图被调用了onDraw（））。一切都存储在同一个活动中，所以我不明白为什么这不起作用？ 这些行存储在Grap
-
这是我第一次尝试开发android应用程序。 我有一个带有ConstraintLayout的MainActivity，它具有BottomNavigationView。每当选择第一个导航项时，我想显示一个类别列表（显示在片段中），然后每当选择此类别时，将显示与该特定类别相关的另一个列表（显示在另一个片段中）。 我读到（Android-fragment.replace（）不替换内容-将其放在顶部）它指
-
问题内容： 大家好，我仍在从事这个libgdx项目的工作，我试图找出将屏幕切换到游戏屏幕的最佳方法。现在，当单击一个按钮时，我需要它来切换到游戏屏幕。我已经看到了一些扩展游戏类的实现方式，但是我不确定这里最好的方法是什么。如果您看到一些可以改进的代码，请告诉我。 这是主要的应用程序类： 问题答案： 这就是我始终执行屏幕切换的方式： 首先，主类需要扩展Game（From ），然后您需要具有一个新的t
-
大家好，我仍然在做这个libgdx项目，我正在努力找出最好的方法来改变我的游戏屏幕现在，当一个按钮被点击时，我需要它转换到游戏屏幕。我见过一些扩展game类的实现，但我不确定从这里开始最好的方法是什么。如果你看到一些可以改进的代码，请让我知道。 以下是主要的应用程序类：
-
我在class1中创建了一个场景，然后在Class2中创建了一个scene2。如何在两者之间切换？ 这是第二节课，我有另一个场景。