Question

我正在尝试编写一个程序，从我创建的表单中给出的点中绘制一个三角形。我知道我写的绘图函数正在工作，因为我通过手动插入参数来测试和绘制三角形，但是当我尝试从字段中的值绘制三角形时，我的drawLine2函数产生的结果与我手动插入值。我想知道在将表单的值分配给Javascript变量时是否做错了。任何帮助都会很棒。

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

function updateForm() {
  var firstx = document.getElementById("firstx").value;
  var firsty = document.getElementById("firsty").value;
  var secondx = document.getElementById("secondx").value;
  var secondy = document.getElementById("secondy").value;
  var thirdx = document.getElementById("thirdx").value;
  var thirdy = document.getElementById("thirdy").value;
  drawLine2(firstx, firsty, secondx, secondy);
  drawLine2(secondx, secondy, thirdx, thirdy);
  drawLine2(thirdx, thirdy, firstx, firsty);
}


function drawLine2(orx, ory, dx, dy) {
  var offsetx = 1;
  if (orx - dx > 0) {
    offsetx = -1;
  }
  var offsety = 1;
  if (ory - dy > 0) {
    offsety = -1;
  }
  drawLine(Math.abs(orx - dx), Math.abs(ory - dy), offsetx, offsety, orx, ory);
}

function drawLine(x1, y1, ox, oy, orx, ory) {
  var x0 = 0;
  var y0 = 0;
  var dy = y1 - y0;
  var dx = x1 - x0;
  var d = dy - (dx * 0.5);
  var x = x0;
  var y = y0;
  if (Math.abs(dy) > Math.abs(dx)) {
    while (y < y1) {
      drawPixel(x, y, ox, oy, orx, ory);
      y = y + 1;
      if (d < 0) {
        d = d + dx;
      } else {
        x = x + 1;
        d = d + dx - dy;
      }
    }
  } else {
    while (x < x1) {
      drawPixel(x, y, ox, oy, orx, ory);
      x = x + 1;
      if (d < 0) {
        d = d + dy;
      } else {
        y = y + 1;
        d = d + dy - dx;
      }
    }
  }
}


function drawPixel(x, y, ox, oy, orx, ory) {
  context.fillStyle = "black";
  context.fillRect((ox * x) + orx, (oy * y) + ory, 1, 1);
}

body {
  margin: 0px;
  padding: 0px;
}

<form method="get">
  First X: <input type="number" max="500" min="0" id="firstx" value="250">
  <br> First Y: <input type="number" max="500" min="0" id="firsty" value="250">
  <br> Second X: <input type="number" max="500" min="0" id="secondx" value="0 ">
  <br> Second Y: <input type="number " max="500 " min="0 " id="secondy" value="0 ">
  <br> Third X: <input type="number " max="500 " min="0 " id="thirdx" value="0 ">
  <br> Third Y: <input type="number " max="500 " min="0 " id="thirdy" value="250 ">
  <br>
  <input type="button" onclick="updateForm()" value="Submit ">
</form>
<canvas id="myCanvas" width="500 " height="500 " style="border:1px solid #000000; ">

Answer 1

本地你正在使用字符串。解析为int，或任何数字类型最有意义。

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

function updateForm() {
  var firstx = parseInt(document.getElementById("firstx").value, 10);
  var firsty = parseInt(document.getElementById("firsty").value, 10);
  var secondx = parseInt(document.getElementById("secondx").value, 10);
  var secondy = parseInt(document.getElementById("secondy").value, 10);
  var thirdx = parseInt(document.getElementById("thirdx").value, 10);
  var thirdy = parseInt(document.getElementById("thirdy").value, 10);
  drawLine2(firstx, firsty, secondx, secondy);
  drawLine2(secondx, secondy, thirdx, thirdy);
  drawLine2(thirdx, thirdy, firstx, firsty);
}


function drawLine2(orx, ory, dx, dy) {
  var offsetx = 1;
  if (orx - dx > 0) {
    offsetx = -1;
  }
  var offsety = 1;
  if (ory - dy > 0) {
    offsety = -1;
  }
  drawLine(Math.abs(orx - dx), Math.abs(ory - dy), offsetx, offsety, orx, ory);
}

function drawLine(x1, y1, ox, oy, orx, ory) {
  var x0 = 0;
  var y0 = 0;
  var dy = y1 - y0;
  var dx = x1 - x0;
  var d = dy - (dx * 0.5);
  var x = x0;
  var y = y0;
  if (Math.abs(dy) > Math.abs(dx)) {
    while (y < y1) {
      drawPixel(x, y, ox, oy, orx, ory);
      y = y + 1;
      if (d < 0) {
        d = d + dx;
      } else {
        x = x + 1;
        d = d + dx - dy;
      }
    }
  } else {
    while (x < x1) {
      drawPixel(x, y, ox, oy, orx, ory);
      x = x + 1;
      if (d < 0) {
        d = d + dy;
      } else {
        y = y + 1;
        d = d + dy - dx;
      }
    }
  }
}


function drawPixel(x, y, ox, oy, orx, ory) {
  context.fillStyle = "black";
  context.fillRect((ox * x) + orx, (oy * y) + ory, 1, 1);
}

body {
  margin: 0px;
  padding: 0px;
}

<form method="get">
  First X: <input type="number" max="500" min="0" id="firstx" value="250">
  <br> First Y: <input type="number" max="500" min="0" id="firsty" value="250">
  <br> Second X: <input type="number" max="500" min="0" id="secondx" value="0 ">
  <br> Second Y: <input type="number " max="500 " min="0 " id="secondy" value="0 ">
  <br> Third X: <input type="number " max="500 " min="0 " id="thirdx" value="0 ">
  <br> Third Y: <input type="number " max="500 " min="0 " id="thirdy" value="250 ">
  <br>
  <input type="button" onclick="updateForm()" value="Submit ">
</form>
<canvas id="myCanvas" width="500 " height="500 " style="border:1px solid #000000; ">

来自HTML表单的Javascript变量

1 个答案: