[英]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
在橡皮擦事件侦听器 function 中，我将线条颜色更改为背景颜色。 它发生了变化（正如我通过 console.log 看到的那样），但在canv事件侦听器 function 中它保持不变。 我无法添加沙箱示例，因为它无法读取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>
我试着检查颜色是否改变了，但仍然不明白为什么它同时在擦除 function 中改变而在 canv function 中没有改变
只需进行一些修复，您就可以达到 go。
const buttons = document.querySelector('.buttons');
进入这个
const buttons = document.querySelector('.colors');
我相信这只是一个简单的错误输入，或者因为您可能已经重新组织了您的div元素而发生了一些事情，并且忘记了更改您的 JS 中的目标 - 通过使用.buttons class，您每次单击填充时都会覆盖颜色或擦除，并且color变量被设置为空字符串。
color = e.path[0].name;
进入这个
color = e.target.name;
虽然这会将您的代码更改为可以工作的代码，并且实际上会从单击的按钮名称中获取颜色，但这并不理想。 您可能会误点击 - 而不是点击实际按钮，您可能会点击它们之间的空间，这会将您的颜色设置为空字符串。 考虑添加后备颜色 - 例如，一种颜色，它是当前 canvas background-color的反转版本。
我还为控制按钮（填充、擦除、重复）添加了字母，以便于使用，因为我无法访问您的原始 PNG 文件。
展开代码片段，并全屏运行它，以查看修复后的功能。
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>
我试图在没有教程的情况下在 JS 中制作 Color Flipper，但它不起作用
[英]I tried to make a Color Flipper in JS without tutorials and it doesn't work
我的 headerStyle 不起作用。 我试图分配背景颜色，但在我运行它时它没有出现
[英]My headerStyle doesn't work. I have tried to assign a background color though it doesn't appear when I run it
我尝试使用引导程序模式类制作弹出式注册表单，但弹出式窗口不起作用
[英]I tried to use bootstrap modal class to make a popup signup form but popup doesn't work
您如何制作整个OWN语言编码器？ 我试过了..（不起作用）
[英]How Do You Make Your Entire OWN Language Coder? I Tried This.. (doesn't work)
使用Jasmine-jQuery，我尝试更改设备HTML，但是它不起作用
[英]With Jasmine-jQuery I tried to change fixture HTML but it doesn't work
import _ from 'lodash-es/lodash.js' 曾经可以工作。 现在它没有，但我没有改变任何东西
[英]import _ from 'lodash-es/lodash.js' used to work. Now it doesn't but I didn't change anything
如何在PHP代码中向可编辑按钮添加可折叠表单？ 我尝试了一些东西，但是没有用
[英]How to add collapsible form to edit-button inside PHP code? I tried something, but didn't work
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.