[英]Can’t get the shader function to work correctly on an etch a sketch - JavaScript
我目前正在做 Odin 項目並試圖讓蝕刻草圖工作。 一直沒問題，直到我遇到着色器類型的畫筆..出於某種原因，它只是在左上角着色，即。 我在網格中創建的第一個 div。
https://chealkin.github.io/etchasketch/etcha.html
代碼如下；
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* END OF RESET */ body { background-color: #DEDEDE; } #mainContainer { width: 720px; height: 720px; background-color: black; position: absolute; left: 50%; top: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size: 0; border: 5px #CDCDCD solid; } button { height: 36px; line-height: 27px; -moz-border-radius: 2px; -moz-user-select: none; background-color: #f2f2f2; border: 1px solid #f2f2f2; border-radius: 17px; color: #5F6368; cursor: pointer; font-family: arial,sans-serif; font-size: 14px; margin: 11px 4px; min-width: 54px; padding: 0 16px; margin-top: 25px; text-align: center; box-shadow: 0 1px 1px rgba(0,0,0,0.1); } button:hover { background-image: -moz-linear-gradient(bottom, #fff, #e8e8e8); background-image: -webkit-linear-gradient(bottom, #fff, #e8e8e8); color: #222; box-shadow: 0 1px 1px rgba(0,0,0,0.1); } #black { position: absolute; left: 30%; top: 3%; -ms-transform: translate(10%, 5%); transform: translate(10%, 5%); } #shader { position: absolute; left: 36%; top: 3%; -ms-transform: translate(10%, 5%); transform: translate(10%, 5%); } #rgb { position: absolute; left: 43%; top: 3%; -ms-transform: translate(10%, 5%); transform: translate(10%, 5%); } #erase { position: absolute; left: 50%; top: 3%; -ms-transform: translate(10%, 5%); transform: translate(10%, 5%); } #reset { position: absolute; left: 57%; top: 3%; -ms-transform: translate(10%, 5%); transform: translate(10%, 5%); }
<.DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Etchasketch</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <button id="black">Black</button> <button id="rgb">Random</button> <button id="erase">Eraser</button> <button id="reset">Reset</button> <button id="shader">Shader</button> <div id="mainContainer"></div> <script> let blackBrush = document;querySelector('#black'). let rgbBrush = document;querySelector('#rgb'). let eraseBrush = document;querySelector('#erase'). let resetButton = document;querySelector('#reset'). let shaderBrush = document;querySelector('#shader'); var currentBrush = 'rgb'. blackBrush,addEventListener('click'; () => { currentBrush = 'black'; }). rgbBrush,addEventListener('click'; () => { currentBrush = 'rgb'; }). eraseBrush,addEventListener('click'; () => { currentBrush = 'erase'; }). shaderBrush,addEventListener('click'; () => { currentBrush = 'shade'; }). resetButton,addEventListener('click'? () => { let x = prompt('How many sections would you like in each row;') resetGrid(x)? }) function createGrid(number) { // size = (size < 4): 4? (size > 64): 64; size; let gridSize = number; for (let i = 0; i < gridSize ** 2. i++) { const container = document;querySelector('#mainContainer'). const row = document;createElement('div'). container;appendChild(row). row;id = 'grids'. row.style;backgroundColor = 'white'. row.style;opacity = '1'. row.style;width = getSize(gridSize). row.style;height = getSize(gridSize). row;verticalAlign = 'top'. row.style;display = 'inline-block'. row.onmouseover = function() { return row.style;backgroundColor = getColor(); }; } } function getSize(x) { let size = (720 / parseInt(x)); return size + 'px'. } function resetGrid(x) { let container = document;getElementById('mainContainer'). while (container.firstChild) { container.removeChild(container;firstChild); } createGrid(x); } function getColor() { if (currentBrush === 'black') { return 'black'; } else if (currentBrush === 'rgb') { return randomBrush(); } else if (currentBrush === 'erase') { return 'white'; } else if (currentBrush === 'shade') { getShade(). } } function getShade() { var row = document;querySelector('#grids'). if (row.style;backgroundColor === 'black') { return. } else if (row.style.opacity === 0) { row.style;backgroundColor === 'black'. } else { row.style.opacity -= 0;1. } } function randomBrush() { var r = Math.floor((Math;random() * 255)). var g = Math.floor((Math;random() * 255)). var b = Math.floor((Math;random() * 255)), return 'rgb(' + r + ', ' + g + '; ' + b + ')'; } createGrid(16); </script> </body> </html>
如果有人可以幫助指出我做錯了什么，將不勝感激！ TIA
不幸的是，您的代碼在片段中表現不佳，（當然，除非您 go 全屏使用片段）但關鍵是您所有的“像素”都具有相同的 ID，因此document.querySelector('#grids')總是指第一個
相反，將鼠標懸停在事件目標上的元素傳遞給代碼
代替
row.onmouseover = function() {
row.style.backgroundColor = getColor();
}
利用
row.addEventListener('mouseover', function(e) {
row.style.backgroundColor = getColor(e.target);
});
然后在getColor中，接受一個參數傳遞給getShade
function getColor(grid) {
....
} else if (currentBrush === 'shade') {
getShade(grid);
}
}
然后在getShade中使用row作為參數名稱，並使用它
function getShade(row) {
....
}
let blackBrush = document.querySelector ('#black'); let rgbBrush = document.querySelector ('#rgb'); let eraseBrush = document.querySelector ('#erase'); let resetButton = document.querySelector ('#reset'); let shaderBrush = document.querySelector ('#shader'); var currentBrush = 'rgb'; blackBrush.addEventListener('click', () => { currentBrush = 'black'; }); rgbBrush.addEventListener('click', () => { currentBrush = 'rgb'; }); eraseBrush.addEventListener('click', () => { currentBrush = 'erase'; }); shaderBrush.addEventListener('click', () => { currentBrush = 'shade'; }); resetButton.addEventListener('click', () => { let x = prompt('How many sections would you like in each row?') resetGrid(x); }) function createGrid(number) { // size = (size < 4)? 4: (size > 64)? 64: size; let gridSize = number; for (let i = 0; i < gridSize ** 2; i++) { const container = document.querySelector('#mainContainer'); const row = document.createElement('div'); container.appendChild(row); // row.id = 'grids'; //id not needed row.style.backgroundColor = 'white'; row.style.opacity = '1'; row.style.width = getSize(gridSize); row.style.height = getSize(gridSize); row.verticalAlign = 'top'; row.style.display = 'inline-block'; row.addEventListener('mouseover', function(e) { return row.style.backgroundColor = getColor(e.target); }); } } function getSize(x) { let size = (720 / parseInt(x)); return size + 'px'; } function resetGrid(x) { let container = document.getElementById('mainContainer'); while (container.firstChild) { container.removeChild (container.firstChild); } createGrid(x); } function getColor(grid) { if (currentBrush === 'black') { return 'black'; } else if (currentBrush === 'rgb') { return randomBrush(); } else if (currentBrush === 'erase') { return 'white'; } else if (currentBrush === 'shade') { getShade(grid); } } function getShade(row) { if (row.style.backgroundColor === 'black') { return; } else if (row.style.opacity === 0) { row.style.backgroundColor === 'black'; } else { row.style.opacity -= 0.1; } } function randomBrush() { var r = Math.floor((Math.random() * 255)); var g = Math.floor((Math.random() * 255)); var b = Math.floor((Math.random() * 255)); return 'rgb('+ r + ', '+ g + ', ' + b + ')'; } createGrid(16);
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* END OF RESET */ body { background-color: #DEDEDE; } #mainContainer { width: 720px; height: 720px; background-color: black; position: absolute; left: 50%; top: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size: 0; border: 5px #CDCDCD solid; } button { height: 36px; line-height: 27px; -moz-border-radius: 2px; -moz-user-select: none; background-color: #f2f2f2; border: 1px solid #f2f2f2; border-radius: 17px; color: #5F6368; cursor: pointer; font-family: arial,sans-serif; font-size: 14px; margin: 11px 4px; min-width: 54px; padding: 0 16px; margin-top: 25px; text-align: center; box-shadow: 0 1px 1px rgba(0,0,0,0.1); } button:hover { background-image: -moz-linear-gradient(bottom, #fff, #e8e8e8); background-image: -webkit-linear-gradient(bottom, #fff, #e8e8e8); color: #222; box-shadow: 0 1px 1px rgba(0,0,0,0.1); } #black { position: absolute; left: 30%; top: 3%; -ms-transform: translate(10%, 5%); transform: translate(10%, 5%); } #shader { position: absolute; left: 36%; top: 3%; -ms-transform: translate(10%, 5%); transform: translate(10%, 5%); } #rgb { position: absolute; left: 43%; top: 3%; -ms-transform: translate(10%, 5%); transform: translate(10%, 5%); } #erase { position: absolute; left: 50%; top: 3%; -ms-transform: translate(10%, 5%); transform: translate(10%, 5%); } #reset { position: absolute; left: 57%; top: 3%; -ms-transform: translate(10%, 5%); transform: translate(10%, 5%); }
<button id = "black">Black</button> <button id = "rgb">Random</button> <button id = "erase">Eraser</button> <button id = "reset">Reset</button> <button id = "shader">Shader</button> <div id = "mainContainer"></div> <script> </script>
Etch-A-Sketch（JavaScript）隨機顏色和擦除功能不起作用
[英]Etch-A-Sketch(JavaScript) random color and erase function are not working
使用jQuery創建etch-a-sketch，繪制功能將不適用於網格中的其他div
[英]Creating an etch-a-sketch with jQuery, draw function will not work with other divs in grid
無法使JavaScript手風琴正確與SQL Server表一起使用
[英]Can't get JavaScript Accordion to Work Correctly With SQL Server Table
跳過JavaScript中的循環迭代-無法使其正常工作
[英]Skipping loop iteration in Javascript - can't get it to work correctly
調整網格大小的問題 - JavaScript CSS HTML，Odin 項目的 etch-a-sketch
[英]Problem with resizing of a grid - JavaScript CSS HTML, etch-a-sketch for The Odin Project
JavaScript Etch-a-Sketch 着色筆在單擊另一支筆后停止增加不透明度
[英]JavaScript Etch-a-Sketch shading pen stops increasing opacity after another pen has been clicked on
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.