[英]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.