我有一个网站，该网站使用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是函数
我有一个网站，该网站使用2个滑块更改在画布上显示的线条的斜率和y轴截距。当我使用滑块更改斜率时，它可以正常工作，但是由于某些原因，当...
正如我的评论中所指出的，您只需要将滑块值转换为数字即可。