Question

我正在尝试创建一个像素艺术制作者，用户可以选择要处理的网格大小（即Canvas）。但是，我的代码不起作用-特别是正在创建表行，但实际上并未显示。我已经将我的JavaSctipt和HTML代码都链接了。

这是我的代码：

let color = document.getElementById("colorPicker");
    let table = document.getElementById("pixelCanvas");
    let sizePicker = document.getElementById("sizePicker");
    
    let height = document.getElementById("inputHeight").value;
    let width = document.getElementById("inputWeight").value;
    makeGrid(height, width);
    
    sizePicker.addEventListener("click", (e) => {
    
      e.preventDefault();
    
      let height = document.getElementById("inputHeight").value;
      let width = document.getElementById("inputWeight").value;
      table.firstElementChild.remove();
    
      makeGrid(height, width);
    
    });
    
    function makeGrid(height, width){
    
    	for(let i=0; i<= height; i++){
    		let row = table.insertRow(i);
    		for(let j=0; j<= width; j++){
    			let cell = row.insertCell(j);
    			cell.addEventListener("click", (e) => {
    				cell.style.backgroundColor = color.value;
    			})
    		}
    	}
    
    }

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Pixel Art Maker</title>
        <link rel="stylesheet" href="style.css">
        <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
      </head>
      <body>
    
      	<h1>Pixel Art Maker</h1>
    
      	<h2>Choose Grid Size:</h2>
      	<form id="sizePicker">
      		Grid Height:
      		<input type="number" id="inputHeight" name="height" min="1" value="1">
      		Grid Width:
      		<input type="number" id="inputWeight" name="width" min="1" value="1">
      		<input type="submit">
      	</form>
    
      	<h2>Pick A Color:</h2>
      	<input type="color" id="colorPicker">
    
      	<h2>Canvas</h2>
      	<table id="pixelCanvas">
      	</table>
    
      <script src="main.js"></script>
      </body>
    </html>

Answer 1

let color = document.getElementById("colorPicker");
let table = document.getElementById("pixelCanvas");
let sizePicker = document.getElementById("sizePicker");

let height = document.getElementById("inputHeight").value;
let width = document.getElementById("inputWeight").value;
makeGrid(height, width);

sizePicker.addEventListener("click", (e) => {

  e.preventDefault();

  let height = document.getElementById("inputHeight").value;
  let width = document.getElementById("inputWeight").value;
  table.firstElementChild.remove();

  makeGrid(height, width);

});

function makeGrid(height, width) {

  for (let i = 0; i < height; i++) {
    let row = table.insertRow(i);
    for (let j = 0; j < width; j++) {
      let cell = row.insertCell(j);
      cell.addEventListener("click", (e) => {
        cell.style.backgroundColor = color.value;
      })
    }
  }

}

table {
  margin: auto
}

tr:nth-child(even) td:nth-child(even),
tr:nth-child(odd) td:nth-child(odd) {
  background-color: #eee;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Pixel Art Maker</title>
  <link rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
</head>

<body>

  <h1>Pixel Art Maker</h1>

  <h2>Choose Grid Size:</h2>
  <form id="sizePicker">
    Grid Height:
    <input type="number" id="inputHeight" name="height" min="1" value="1"> Grid Width:
    <input type="number" id="inputWeight" name="width" min="1" value="1">
    <input type="submit">
  </form>

  <h2>Pick A Color:</h2>
  <input type="color" id="colorPicker">

  <h2>Canvas</h2>
  <table id="pixelCanvas" cellspacing="0">
  </table>

  <script src="main.js"></script>
</body>

</html>

Answer 2

因此，代码正在运行，表已创建，但是您没有看到任何内容，因为单元格没有初始样式。我添加了基本样式来模拟将死。此外，还有两个问题-单元格之间的间隙（用cellspacing="0"固定）和n+1行/单元之间的间隙在严格的<条件下固定。结果如下：

let color = document.getElementById("colorPicker");
let table = document.getElementById("pixelCanvas");
let sizePicker = document.getElementById("sizePicker");

let height = document.getElementById("inputHeight").value;
let width = document.getElementById("inputWeight").value;
makeGrid(height, width);

sizePicker.addEventListener("click", (e) => {

  e.preventDefault();

  let height = document.getElementById("inputHeight").value;
  let width = document.getElementById("inputWeight").value;
  table.firstElementChild.remove();

  makeGrid(height, width);

});

function makeGrid(height, width) {

  for (let i = 0; i < height; i++) {
    let row = table.insertRow(i);
    for (let j = 0; j < width; j++) {
      let cell = row.insertCell(j);
      cell.addEventListener("click", (e) => {
        cell.style.backgroundColor = color.value;
      })
    }
  }

}

table {
  margin: auto
}

tr:nth-child(even) td:nth-child(even),
tr:nth-child(odd) td:nth-child(odd) {
  background-color: #eee;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Pixel Art Maker</title>
  <link rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
</head>

<body>

  <h1>Pixel Art Maker</h1>

  <h2>Choose Grid Size:</h2>
  <form id="sizePicker">
    Grid Height:
    <input type="number" id="inputHeight" name="height" min="1" value="1"> Grid Width:
    <input type="number" id="inputWeight" name="width" min="1" value="1">
    <input type="submit">
  </form>

  <h2>Pick A Color:</h2>
  <input type="color" id="colorPicker">

  <h2>Canvas</h2>
  <table id="pixelCanvas" cellspacing="0">
  </table>

  <script src="main.js"></script>
</body>

</html>

此外，您应尝试在mousemove被触发之后直到mousedown为止的mouseup事件中填充单元格，或者至少单击{{1} }细胞并不是很容易。

同时，它对培训很有用，但是由于巨大的表并不能真正提高性能和内存效率，因此我建议进一步选择1px。

创建Pixel Art Maker网格

2 个答案: