时间戳

首页 > 解决方案 > 使用变量画线（画布）

javascript - 使用变量画线（画布）

问题描述

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

我已经设置了一个非常粗糙的画布区域，搜索/变量输入，但似乎无法将它们链接在一起。目前，我在 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>

标签： javascripthtmlcanvas

解决方案

画布交互命令运行一次。要每次重绘，请将代码放在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>

推荐阅读