我有一个网站，它使用 2 个 slider 来更改 Canvas 上显示的直线的斜率和 y 轴截距。当我使用 slider 改变斜率时它工作正常，但由于某种原因当我使用 slider 进行 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 得到的线是函数
最佳答案
正如我在评论中指出的那样，您只需将 slider 值转换为数字即可。
您的代码副本，固定行用 /* 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>关于javascript - html5 slider 破坏 javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58861788/