我正在开发一个免费的画布。它有两个工具。画笔画笔和橡皮擦。默认情况下,画笔被选中,用户可以绘制。通过从下拉菜单中选择“橡皮擦”,我将“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>
看来您有一个键入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。如何在两者之间切换? 这是第二节课,我有另一个场景。