Question

我有一个网站，该网站使用2个滑块更改在画布上显示的线条的斜率和y轴截距。当我使用滑块更改斜率时效果很好，但是由于某些原因，当我使用滑块进行y截距时会中断

"use strict";

//vars
var ctx = document.getElementById('mahcanvas').getContext('2d');
var shapes;
const pi = Math.PI;

ctx.lineWidth = 2;

//functions


//constructors
function Point(x, y) {
  this.x = x;
  this.y = y;
  this.array = [x, y];
}

function Line(slope, yint) {
  this.slope = slope;
  this.yint = yint;
  this.eval = function(n) {
    return this.slope * n + this.yint;
  };

  this.intersect = function(line) {
    return (Number(line.yint) - Number(this.yint)) / (this.slope - line.slope);
  };
}

var line1 = new Line(5, 50);
var line2 = new Line(1, 200);

setInterval(function() {
  ctx.clearRect(0,0,500,500)

  line1.slope = document.getElementById('s1').value / 10;

  //document.getElementById('debug').innerHTML = document.getElementById('s2').value.toString();

  line1.yint = document.getElementById('s2').value;

  //draw
  ctx.beginPath();
  ctx.arc(line1.intersect(line2), line1.eval(line1.intersect(line2)), 5, 0, pi * 2);
  ctx.fill();
  ctx.closePath();

  ctx.beginPath();
  ctx.moveTo(0, line1.eval(0));
  ctx.lineTo(500, line1.eval(500));
  ctx.stroke();
  ctx.closePath();

  ctx.beginPath();
  ctx.moveTo(0, line2.eval(0));
  ctx.lineTo(500, line2.eval(500));
  ctx.stroke();
  ctx.closePath();
}, 20);

document.addEventListener('keydown', function(event) {
  line1.yint = Number(event.key) * 100;
});

body {
  text-align: center;
  margin: 0;
  background-color: red;
}

canvas {
  background-color: white;
  margin: 0;
}

<!doctype html>
<html>
  <head>
      <link href="style.css" rel="stylesheet">
      <title>title</title>
  </head>
  <body>
    <h1 id="debug">hi</h1>
    <canvas width="500" height="500" id="mahcanvas"></canvas>
    <input type="range" min="-100" max="100" value="10" id="s1" /><br>
    <input type="range" min="0" max="500" value="250" id="s2" />
    <script src="script.js"></script>
  </body>
</html>

javascript代码 line1和line2是对象，我得到的行与line.eval和line.intercept是函数

Answer 1

正如我在评论中所指出的，您只需要将滑块值转换为数字即可。

带有/* BM67 ...注释的固定行的代码副本

"use strict";

var ctx = mahcanvas.getContext('2d');
var shapes;
const pi = Math.PI;

ctx.lineWidth = 2;
function Point(x, y) {
  this.x = x;
  this.y = y;
  this.array = [x, y];
}

function Line(slope, yint) {
  this.slope = slope;
  this.yint = yint;
  this.eval = function(n) {
    return this.slope * n + this.yint;
  };

  this.intersect = function(line) {
    return (line.yint - this.yint) / (this.slope - line.slope);
  };
}

var line1 = new Line(5, 50);
var line2 = new Line(1, 200);

setInterval(function() {
  ctx.clearRect(0,0,500,500)
  line1.slope = s1.value / 10; // the / converts to number

  /* BM67 The fixed line -------------------------------------*/
  line1.yint = Number(s2.value);
  /*----------------------------------------------------------*/

  ctx.beginPath();
  ctx.arc(line1.intersect(line2), line1.eval(line1.intersect(line2)), 5, 0, pi * 2);
  ctx.fill();
  ctx.closePath();

  ctx.beginPath();
  ctx.moveTo(0, line1.eval(0));
  ctx.lineTo(500, line1.eval(500));
  ctx.stroke();
  ctx.closePath();

  ctx.beginPath();
  ctx.moveTo(0, line2.eval(0));
  ctx.lineTo(500, line2.eval(500));
  ctx.stroke();
  ctx.closePath();
}, 20);

document.addEventListener('keydown', function(event) {
  line1.yint = Number(event.key) * 100;
});

body {
  text-align: center;
  margin: 0;
  background-color: red;
}

canvas {
  background-color: white;
  margin: 0;
}

<!doctype html>
<html>
  <head>
      <link href="style.css" rel="stylesheet">
      <title>title</title>
  </head>
  <body>
    <h1 id="debug">hi</h1>
    <canvas width="500" height="500" id="mahcanvas"></canvas>
    <input type="range" min="-100" max="100" value="10" id="s1" /><br>
    <input type="range" min="0" max="500" value="250" id="s2" />
    <script src="script.js"></script>
  </body>
</html>

html5滑块破坏javascript

1 个答案: