javascript - 如何使用 <input type ="number"> 更改线宽？

Question

我希望当用户在第一个输入中输入数字时，ctx.lineWidth等于输入的值。第二个输入 假设确认数字的输入并运行函数 size()，该函数等于第一个 input 的值到 的新值>ctx.lineWidth 是

const c = document.querySelector("#c");
c.height = window.innerHeight;
c.width = window.innerWidth;
const ctx = c.getContext("2d");
//default color
ctx.strokeStyle = "black";

window.addEventListener('load', () => {

  let painting = false;

  //when mouse is clicked; paint
  function mousedown(b) {
    painting = true;
    //allows for paint to appear without nedding to drag mouse
    mousemove(b);
  }
  //when mouse is not clicked; don't paint
  function mouseup() {
    painting = false;
    //resets path each time so multiple can be created
    ctx.beginPath();
  }

  function mousemove(b) {
    //Get correct mouse position
    var pos = getMousePos(c, b);

    //if not holding down the mouse; nothing happens
    if (!painting) return;
    //roundness of paint
    ctx.lineCap = 'round';


    //create paint wherever the mouse goes: ctx[on the canvas].lineTo[move the line to]()
    ctx.lineTo(pos.x, pos.y);
    //end the stroke and visualize paint
    ctx.stroke();
    //begins a new paint so that everything doesn't just stick to a fat line
    ctx.beginPath();
    //move the new line to wherever the mouse goes
    ctx.moveTo(pos.x, pos.y);
  }
  //starting posistion of paint line
  c.addEventListener('mousedown', mousedown);
  //ending posistion of paint line
  c.addEventListener('mouseup', mouseup);
  //whenever the mouse is moving; paint 
  c.addEventListener('mousemove', mousemove);

});

function size() {
  const num = document.getElementById("sizeInput").value;
  ctx.lineWidth = num;
}

function getMousePos(canvas, evt) {
  var rect = canvas.getBoundingClientRect();
  return {
    x: evt.clientX - rect.left,
    y: evt.clientY - rect.top
  };
}

#c {
  border: 1px solid black;
}

#container {
  align-content: left;
}

.size {
  width: 13em;
  height: 3em;
}

<div id="container">
  <h2>SIZE:</h2>
  <form>
    <input class="size" type="number" step="1" id="sizeInput" placeholder="Type a number only" value="15">
    <input onclick="size()" type="button" value="confirm">
    <p id="number"></p>
  </form>

  <canvas id="c"></canvas>
</div>

我希望 const num 从以下位置获取输入的 .value:

<input class="size" type="number" step="1" id="sizeInput" placeholder="Type a number only" value="15">

该信息用于将 ctx.lineWidth 分配给 const num 的值。

Answer 1

将事件监听器附加到按钮，而不是使用 onclick。

下面修改后的代码应该可以工作

const c = document.querySelector("#c");
c.height = window.innerHeight;
c.width = window.innerWidth;
const ctx = c.getContext("2d");
//default color
ctx.strokeStyle = "black";

let confirmButton = document.querySelector(".confirm");

window.addEventListener('load', () => {

  let painting = false;

  //when mouse is clicked; paint
  function mousedown(b) {
    painting = true;
    //allows for paint to appear without nedding to drag mouse
    mousemove(b);
  }
  //when mouse is not clicked; don't paint
  function mouseup() {
    painting = false;
    //resets path each time so multiple can be created
    ctx.beginPath();
  }

  function mousemove(b) {
    //Get correct mouse position
    var pos = getMousePos(c, b);

    //if not holding down the mouse; nothing happens
    if (!painting) return;
    //roundness of paint
    ctx.lineCap = 'round';


    //create paint wherever the mouse goes: ctx[on the canvas].lineTo[move the line to]()
    ctx.lineTo(pos.x, pos.y);
    //end the stroke and visualize paint
    ctx.stroke();
    //begins a new paint so that everything doesn't just stick to a fat line
    ctx.beginPath();
    //move the new line to wherever the mouse goes
    ctx.moveTo(pos.x, pos.y);
  }
  //starting posistion of paint line
  c.addEventListener('mousedown', mousedown);
  //ending posistion of paint line
  c.addEventListener('mouseup', mouseup);
  //whenever the mouse is moving; paint 
  c.addEventListener('mousemove', mousemove);
  confirmButton.addEventListener('click', size);
});

function size() {
  const num = document.getElementById("sizeInput").value;
  ctx.lineWidth = num;
  console.log("blah "+ ctx.lineWidth)
}

function getMousePos(canvas, evt) {
  var rect = canvas.getBoundingClientRect();
  return {
    x: evt.clientX - rect.left,
    y: evt.clientY - rect.top
  };
}

#c {
  border: 1px solid black;
}

#container {
  align-content: left;
}

.size {
  width: 13em;
  height: 3em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <h2>SIZE:</h2>
  <form>
    <input class="size" type="number" step="1" id="sizeInput" placeholder="Type a number only" value="15">
    <input class="confirm" type="button" value="confirm">
    <p id="number"></p>
  </form>

  <canvas id="c"></canvas>
</div>