我有一个任务，我想使用 CanvasRenderingContext2D 方法在区间 x =[-10,10] 和 - 如果存在 - 相应的零处实现二次方程的图形可视化。
要将坐标转换为画布内的像素坐标，我将使用以下函数：
var toCanvasX = function(x) {
return (x +(max-min)/2)*canvas.width/(max-min);
}
var toCanvasY = function(y) {
return canvas.height-(y+(max-min)/2)*canvas.height/(max-min)
}
图表应如下所示：
我该如何解决？
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<h1>Solver of Quadratic Equations</h1>
<script>
var a, b, c;
var output;
function check() {
a = document.forms["input_form"]["anumber"].value;
b = document.forms["input_form"]["bnumber"].value;
c = document.forms["input_form"]["cnumber"].value;
if (a == 0) {
output = "a cannot equal zero!";
} else if (isNaN(a)) {
output = "a has to be a number!";
} else if (isNaN(b)) {
output = "b has to be a number!";
} else if (isNaN(c)) {
output = "c has to be a number!";
} else {
var x1 = (-b - Math.sqrt(Math.pow(b, 2) - 4 * a * c)) / (2 * a);
var x2 = (-b + Math.sqrt(Math.pow(b, 2) - 4 * a * c)) / (2 * a);
output = "The polynomial <strong>" + (a == 1 ? "" : a) + "x\u00B2 + " + (b == 1 ? "" : b) + "x + " + c + " = 0</strong> has two zeros x1=" + x1 + "," + " " + "x2=" + x2;
}
document.getElementById("output").innerHTML = output;
}
</script>
</head>
<body>
该程序计算 ax² + bx + c 形式的二次多项式的零点，并以图形方式显示区间 x ∈ [-10,10] 中的解。
<br><br>
<form name="input_form" action="javascript:check();">
a: <input type="text" name="anumber" required>
b: <input type="text" name="bnumber" required>
c: <input type="text" name="cnumber" required>
<br><br>
<input type="submit" value="Calculate zeros">
</form>
<p id="output"/>
我不知道你的两个函数
toCanvasX(x)toCanvasY(y)xyminmax当您对
[-10,10]0.1for (let x = -10; x < 10; x += 0.1) {
}
并在该 for 循环内使用
xylineTo(x,y)这是一个例子：
let canvas = document.createElement("canvas");
document.body.appendChild(canvas);
let context = canvas.getContext("2d");
canvas.width = 400;
canvas.height = 400;
let a = 1;
let b = 3;
let c = 2;
let y;
context.strokeStyle = "#000000";
context.beginPath();
context.moveTo(canvas.width / 2, 0);
context.lineTo(canvas.width / 2, canvas.height);
context.moveTo(0, canvas.height / 2);
context.lineTo(canvas.width, canvas.height / 2);
context.stroke();
context.closePath();
context.strokeStyle = "#5ead5e";
context.beginPath();
let scale = 30;
for (let x = -10; x < 10; x += 0.1) {
y = (-1) * ((a * (x * x)) + (b * x) + c);
context.lineTo(canvas.width / 2 + x * scale, canvas.height / 2 + y * scale);
}
context.stroke();
context.closePath();
let x1 = (-b - Math.sqrt(Math.pow(b, 2) - 4 * a * c)) / (2 * a);
let x2 = (-b + Math.sqrt(Math.pow(b, 2) - 4 * a * c)) / (2 * a);
context.beginPath();
context.arc(canvas.width / 2 + x1 * scale, canvas.height / 2, 4, 0, 2 * Math.PI);
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.arc(canvas.width / 2 + x2 * scale, canvas.height / 2, 4, 0, 2 * Math.PI);
context.fill();
context.stroke();
context.closePath();