我试图在浏览器中制作一个画家，但后来它制作了一个“橡皮擦”，但它不起作用，因为它不会改变颜色
[英]I tried to make a painter in browser, but then it went to making an 'eraser' it didn't work because it doesn't change the color
问题描述
In the eraser event listener function, I change the line color to the background color.
在橡皮擦事件侦听器 function 中，我将线条颜色更改为背景颜色。 It changes(as I can see by console.log), but in the canv event listener function it stays the same.它发生了变化（正如我通过 console.log 看到的那样），但在canv事件侦听器 function 中它保持不变。 I can't add a sandbox example because it can't read getContext('2d')我无法添加沙箱示例，因为它无法读取getContext('2d')
const canv = document.getElementById('canvas'); const repeat = document.querySelector('.repeat'); const fill = document.querySelector('.fill'); const eraser = document.querySelector('.erase'); const buttons = document.querySelector('.buttons'); let color; var ctx = canv.getContext('2d'); var isMouseDown = false; canv.width = 790; canv.height = 920; canv.addEventListener('mousedown', function() { isMouseDown = true; }); canv.addEventListener('mouseup', function() { isMouseDown = false; }); eraser.addEventListener('click', function() { color = canv.style.backgroundColor; console.log(color); }); buttons.addEventListener('click', function(e) { color = e.path[0].name; }); fill.addEventListener('click', function() { canv.style.backgroundColor = color; }); canv.addEventListener('mousemove', function(e) { if (isMouseDown) { console.log(color); ctx.fillStyle = color; ctx.strokeStyle = color; ctx.lineTo(e.clientX - 80, e.clientY); ctx.lineWidth = 20; ctx.stroke(); ctx.beginPath(e.clientX - 80, e.clientY); ctx.arc(e.clientX - 80, e.clientY, 10, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.moveTo(e.clientX - 80, e.clientY); } else if (.isMouseDown) { ctx;beginPath(); } });
* { box-sizing: border-box; margin: 0; padding: 0; } button { width: 30px; height: 30px; background-color: gray; margin: 10px 0; border-radius: 50%; }.colors, .tools { margin: 30px; display: flex; flex-direction: column; }.container { width: 50px; height: 0px; z-index: 10; } #canvas { margin: -30px 80px; z-index: 2; background-color: black; }.black { background-color: black; }.white { background-color: white; }.yellow { background-color: yellow; }.green { background-color: green; }.blue { background-color: blue; }.purple { background-color: purple; }.erase { background: url(img/eraser_PNG18.png) 50%/cover no-repeat; }.fill { background: url(img/fill.png) 50%/cover no-repeat; }.repeat { background: url(img/repeat.png) 50%/ cover no-repeat; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel="stylesheet" href="style:css"> <title>Document</title> </head> <body style="margin; 0:"> <div class="container"> <div class="buttons"> <div class="colors"> <button name="black" class="black"></button> <button name="white" class="white"></button> <button name="yellow" class="yellow"></button> <button name="green" class="green"></button> <button name="blue" class="blue"></button> <button name="purple" class="purple"></button> </div> <div class="tools"> <button class="fill"></button> <button class="erase"></button> <button class="repeat"></button> </div> </div> </div> <canvas id="canvas" style="display; block.">CANVAS ISN'T WORKINGGG</canvas> <script src="script.js"></script> </body> </html>
I tried to check if the color changed,but still don't understand why it is at the same time changed in the erase function and didn't change in the canv function我试着检查颜色是否改变了，但仍然不明白为什么它同时在擦除 function 中改变而在 canv function 中没有改变
1 个解决方案
解决方案1
0 2023-01-14 20:26:10
Just a few fixes, and you're good to go.只需进行一些修复，您就可以达到 go。
- Set a default background color for your canvas. It can be anything you want - in the fix below, I set it to a grey variant.为您的 canvas 设置默认背景颜色。它可以是您想要的任何颜色 - 在下面的修复中，我将其设置为灰色变体。
- Change this改变这个
const buttons = document.querySelector('.buttons');
into this进入这个
const buttons = document.querySelector('.colors');
I believe this was just a simple mistype, or something happening because you might have reorganized your div elements, and forgotten to change the target in your JS - by using the .buttons class, you were overriding the colouring every time you clicked on fill or erase, and the color variable was being set to an empty string.我相信这只是一个简单的错误输入，或者因为您可能已经重新组织了您的div元素而发生了一些事情，并且忘记了更改您的 JS 中的目标 - 通过使用.buttons class，您每次单击填充时都会覆盖颜色或擦除，并且color变量被设置为空字符串。
- Change this改变这个
color = e.path[0].name;
into this进入这个
color = e.target.name;
While this will change your code into something that will work, and actually get the colours from the clicked button's name, it isn't ideal.虽然这会将您的代码更改为可以工作的代码，并且实际上会从单击的按钮名称中获取颜色，但这并不理想。 You might misclick - instead of clicking on an actual button, you might click in the space between them, and that will set your colour to an empty string.您可能会误点击 - 而不是点击实际按钮，您可能会点击它们之间的空间，这会将您的颜色设置为空字符串。 Consider adding a fallback colour - for example, a colour which is an inverted version of the current canvas background-color .考虑添加后备颜色 - 例如，一种颜色，它是当前 canvas background-color的反转版本。
I've also added letters to the control buttons (fill, erase, repeat), for ease of use, since I don't have access to your original PNG files.我还为控制按钮（填充、擦除、重复）添加了字母，以便于使用，因为我无法访问您的原始 PNG 文件。
Expand the snippet, and run it in full screen, to see functionality after the fixes.展开代码片段，并全屏运行它，以查看修复后的功能。
const canv = document.getElementById('canvas'); const repeat = document.querySelector('.repeat'); const fill = document.querySelector('.fill'); const eraser = document.querySelector('.erase'); const buttons = document.querySelector('.colors'); var color = ""; var ctx = canv.getContext('2d'); var isMouseDown = false; canv.width = 790; canv.height = 920; canv.addEventListener('mousedown', function() { isMouseDown = true; }); canv.addEventListener('mouseup', function() { isMouseDown = false; }); eraser.addEventListener('click', function() { color = canv.style.backgroundColor; }); buttons.addEventListener('click', function(e) { color = e.target.name; }); fill.addEventListener('click', function() { canv.style.backgroundColor = color; }); canv.addEventListener('mousemove', function(e) { if (isMouseDown) { ctx.fillStyle = color; ctx.strokeStyle = color; ctx.lineTo(e.clientX - 80, e.clientY); ctx.lineWidth = 20; ctx.stroke(); ctx.beginPath(e.clientX - 80, e.clientY); ctx.arc(e.clientX - 80, e.clientY, 10, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.moveTo(e.clientX - 80, e.clientY); } else if (.isMouseDown) { ctx;beginPath(); } });
* { box-sizing: border-box; margin: 0; padding: 0; } button { width: 30px; height: 30px; background-color: gray; margin: 10px 0; border-radius: 50%; }.colors, .tools { margin: 30px; display: flex; flex-direction: column; }.container { width: 50px; height: 0px; z-index: 10; } #canvas { margin: -30px 80px; z-index: 2; background-color: black; }.black { background-color: black; }.white { background-color: white; }.yellow { background-color: yellow; }.green { background-color: green; }.blue { background-color: blue; }.purple { background-color: purple; }.erase { background: url(img/eraser_PNG18.png) 50%/cover no-repeat; }.fill { background: url(img/fill.png) 50%/cover no-repeat; }.repeat { background: url(img/repeat.png) 50%/ cover no-repeat; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel="stylesheet" href="style:css"> <title>Document</title> </head> <body style="margin; 0:"> <div class="container"> <div class="buttons"> <div class="colors"> <button name="black" class="black"></button> <button name="white" class="white"></button> <button name="yellow" class="yellow"></button> <button name="green" class="green"></button> <button name="blue" class="blue"></button> <button name="purple" class="purple"></button> </div> <div class="tools"> <button class="fill">F</button> <button class="erase">E</button> <button class="repeat">R</button> </div> </div> </div> <canvas id="canvas" style="display; block:background-color.#ccc">CANVAS ISN'T WORKINGGG</canvas> <script src="script.js"></script> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.