Question

我正在尝试使用搜索栏中的输入（长度（在代码中））来绘制“长度”长度的线。

我设置了一个非常粗糙的画布区域，即搜索/变量输入，但似乎无法将它们链接在一起。目前，我在lineTo方向上具有该变量，并且确实可以绘制，但是即使该变量已更新，它仍然保持静态。

function myFunction() {
  var length = document.getElementById("myText").value;

}

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(100,25);
ctx.lineTo(length,25);
ctx.stroke();

<canvas id="myCanvas" width="500" height="50"
style="border:1px solid #d3d3d3;">
</canvas>
<input class="search" type="number" id="myText" value="Size...">
<button class="button" onclick="myFunction()">Size</button>
<p id="demo"></p>

Answer 1

画布交互命令运行一次。要每次重绘，请将代码放在myFunction内：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

function myFunction() {
  var length = document.getElementById("myText").value;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.moveTo(100, 25);
  ctx.lineTo(length, 25);
  ctx.stroke();
  ctx.closePath();
}

myFunction();

<canvas id="myCanvas" width="500" height="50" style="border:1px solid #d3d3d3;">
</canvas>
<input class="search" type="number" id="myText" value="Size...">
<button class="button" onclick="myFunction()">Size</button>
<p id="demo"></p>

Answer 2

我推荐

<canvas id="myCanvas" width="500" height="50"
style="border:1px solid #d3d3d3;">
</canvas>
<input class="search" type="number" id="myText">
<button class="button" onclick="myFunction()">Size</button>
<p id="demo"></p>

我删除了“ value =“ Size ...”“，我不知道您是否还有其他意图

var canvas = document.getElementById("myCanvas");

function myFunction() {
  var length = document.getElementById("myText").value || 100;
  var ctx = canvas.getContext("2d");
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.moveTo(length,25);
  ctx.lineTo(0,25);
  ctx.stroke();
}
myFunction()

使用变量画线（画布）

2 个答案: