时间戳

首页 > 解决方案 > 在 JS 中创建网格艺术

javascript - 在 JS 中创建网格艺术

问题描述

我正在尝试创建一个可点击的网格。

When the user clicks a grid
Then fill that box with a chosen color
And continue filling cells
But if user clicks mouse
Then stop filling cells

When the user inputs grid dimensions
Then create the grid cells

我有基本的网格结构，但它出现然后消失。

function makeGrid() {
  var heights = document.getElementById("inputHeight").value;
  var widths = document.getElementById("inputWidth").value;
  for (var i=0; i<heights; i++){
    for (var j=0; j<heights; j++){
      var x = document.createElement("CANVAS");
      var ctx = x.getContext("2d");
      //stroke(0);
      ctx.fillStyle = "white";
      ctx.fillRect(63*heights, 63*widths, 63, 63);
      document.body.appendChild(x);
    }
  }
}
body {
    text-align: center;
}

h1 {
    font-family: Monoton;
    font-size: 70px;
    margin: 0.2em;
}

h2 {
    margin: 1em 0 0.25em;
}

h2:first-of-type {
    margin-top: 0.5em;
}

table,
tr,
td {
    border: 1px solid black;
}

table {
    border-collapse: collapse;
    margin: 0 auto;
}

tr {
    height: 20px;
}

td {
    width: 20px;
}

input[type=number] {
    width: 6em;
}
<!DOCTYPE html>
<html>
<head>
<style>
canvas {
  border: 1px solid black;
}
</style>
    <title>Clickable Grid!</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Monoton">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Clickable Grid</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="inputWidth" name="width" min="1" value="1">
        <input type="submit" value= "submit" onClick = "makeGrid()">
    </form>

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

    <h2>Design Canvas</h2>
    <table id="pixelCanvas"></table>

    <script src="designs.js"></script>
</body>
</html>

标签： javascripthtmlcss

解决方案

提交事件正在触发刷新。您需要利用该submit事件并阻止其默认操作。

此外，对于网格宽度 in ，您有一个错误，makeGrid()因为您对两个循环都使用height了 value。网格未按您的意愿显示，因为逻辑需要修改（超出此问题的范围）：

function makeGrid(ev) {
  ev.preventDefault();
  var heights = document.getElementById("inputHeight").value;
  var widths = document.getElementById("inputWidth").value;
  for (var i=0; i<heights; i++){
    for (var j=0; j<widths; j++){
      var x = document.createElement("CANVAS");
      var ctx = x.getContext("2d");
      //stroke(0);
      ctx.fillStyle = "white";
      ctx.fillRect(63*heights, 63*widths, 63, 63);
      document.body.appendChild(x);
    }
  }
}
body {
    text-align: center;
}

h1 {
    font-family: Monoton;
    font-size: 70px;
    margin: 0.2em;
}

h2 {
    margin: 1em 0 0.25em;
}

h2:first-of-type {
    margin-top: 0.5em;
}

table,
tr,
td {
    border: 1px solid black;
}

table {
    border-collapse: collapse;
    margin: 0 auto;
}

tr {
    height: 20px;
}

td {
    width: 20px;
}

input[type=number] {
    width: 6em;
}
<!DOCTYPE html>
<html>
<head>
<style>
canvas {
  border: 1px solid black;
}
</style>
    <title>Clickable Grid!</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Monoton">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Clickable Grid</h1>

    <h2>Choose Grid Size</h2>
    <form id="sizePicker" onsubmit="makeGrid(event)">
        Grid Height:
        <input type="number" id="inputHeight" name="height" min="1" value="1">
        Grid Width:
        <input type="number" id="inputWidth" name="width" min="1" value="1">
        <input type="submit" value= "submit">
    </form>

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

    <h2>Design Canvas</h2>
    <table id="pixelCanvas"></table>

    <script src="designs.js"></script>
</body>
</html>

推荐阅读