## 如何用JavaScript和HTML 5画布绘制线性函数？内容来源于 Stack Overflow，并遵循CC BY-SA 3.0许可协议进行翻译与使用

• 回答 (1)
• 关注 (0)
• 查看 (70)

```<!DOCTYPE html>
<html lang="pl">
<meta charset="utf-8" />
<title>Ploter</title>
<style>
body {
background-color: #303030;
margin-right: auto;
margin-left: auto;
text-align: center;
}

h1,
h2 {
}
</style>
<script>
var canvas;
var context;

canvas = document.getElementById("plotCanvas");
context = canvas.getContext("2d");

}

function plot() {
var a = document.getElementById("inputA").value;
var b = document.getElementById("inputB").value;

document.getElementById("funEquation").innerHTML = "y=" + a + "x+" + b;
context.clearRect(0, 0, canvas.width, canvas.height);

var x0 = 0.5 * canvas.width;
var y0 = 0.5 * canvas.height;
var scale = 40; //40px per 1 unit
var x;
var y;
var dx = 4;
var xMax = Math.round((canvas.width - x0) / dx);
var xMin = Math.round(-x0 / dx);
var axes = {};
axes.x0 = x0;
axes.y0 = y0;
axes.scale = scale;

drawAxes(context, axes);

context.beginPath();
context.strokeStyle = "white";
context.lineWidth = 2;

for (var i = xMin; i < xMax; i++) {
x = dx * i;
y = (a * x + b) / scale;
if (i == xMin) context.moveTo(x0 + x, y0 - y);
else context.lineTo(x0 + x, y0 - y);

}
context.stroke();
}

function drawAxes(context, axes) {
var x0 = axes.x0;
var y0 = axes.y0;
var width = context.canvas.width;
var height = context.canvas.height;
var xmin = 0;
context.beginPath();
context.strokeStyle = "red";
context.lineWidth = 5;
//----Y axis----
context.moveTo(xmin, y0);
context.lineTo(width, y0);
//----X axis-----
context.moveTo(x0, 0);
context.lineTo(x0, height);

//---X arrow---
context.moveTo(width, height / 2);
context.lineTo(width - 15, (height / 2) + 10);
context.moveTo(width, height / 2);
context.lineTo(width - 15, (height / 2) - 10);
//---Y arrow---
context.moveTo(width / 2, 0);
context.lineTo((width / 2) - 10, 15);
context.moveTo(width / 2, 0);
context.lineTo((width / 2) + 10, 15);

//X - signs
for (var i = x0; i < width; i += 50) {
context.moveTo(i, (height / 2) - 7);
context.lineTo(i, (height / 2) + 7);
}
for (var i = x0; i > 0; i -= 50) {
context.moveTo(i, (height / 2) - 7);
context.lineTo(i, (height / 2) + 7);
}

//Y - signs
for (var i = y0; i < height; i += 50) {
context.moveTo((width / 2) - 7, i);
context.lineTo((width / 2) + 7, i);
}
for (var i = y0; i > 0; i -= 50) {
context.moveTo((width / 2) - 7, i);
context.lineTo((width / 2) + 7, i);
}

context.stroke();
}
</script>
<body>
<h1>Ploter XY</h1>
<main>
<section>
<div id="inputContainer">
<label for="inputA">a:</label>
<input id="inputA" type="text" />
<br />
<label for="inputB">b:</label>
<input id="inputB" type="text" />
<br />
<p>Equation: <span id="funEquation"></span></p>
<input id="confirmButton" type="button" value="Draw" onclick="plot()"></input>
</div>
<div id="plotContainer">
<canvas id="plotCanvas" height="500" width="700" />
</div>
<section>
</main>
</body>
</html>```

### 1 个回答

`y=(a*x+b)/scale;`

```var a = Number(document.getElementById("inputA").value);
var b = Number(document.getElementById("inputB").value);```

```var a = +document.getElementById("inputA").value;
var b = +document.getElementById("inputB").value;```

```x=dx*i;
y=(a*x+b)/scale;```

```x=dx*i;
y=(a*x+b);

x /= scale;
y /= scale;```

```var canvas;
var context;

{
canvas = document.getElementById("plotCanvas");
context = canvas.getContext("2d");

}

function plot()
{
var a = Number(document.getElementById("inputA").value);
var b = Number(document.getElementById("inputB").value);

document.getElementById("funEquation").innerHTML = "y=" + a +"x+" + b;

context.clearRect(0,0, canvas.width, canvas.height);

var x0 = 0.5 * canvas.width;
var y0 = 0.5 * canvas.height;
var scale = 1;  //40px per 1 unit
var x;
var y;
var dx = 4;
var xMax = Math.round((canvas.width-x0)/dx);
var xMin = Math.round(-x0/dx);
var axes={};
axes.x0 = x0;
axes.y0 = y0;
axes.scale = scale;

drawAxes(context,axes);

context.beginPath();
context.strokeStyle = "white";
context.lineWidth = 2;

for (var i=xMin; i<xMax; i++)
{
x=dx*i;
y=(a*x+b);

x /= scale;
y /= scale;
if(i==xMin) {
context.moveTo(x0+x,y0-y);
} else {
context.lineTo(x0+x,y0-y);
}
}

context.stroke();
}

function drawAxes(context, axes)
{
var x0=axes.x0;
var y0=axes.y0;
var width=context.canvas.width;
var height = context.canvas.height;
var xmin = 0;
context.beginPath();
context.strokeStyle = "red";
context.lineWidth = 5;
//----Y axis----
context.moveTo(xmin,y0);
context.lineTo(width,y0);
//----X axis-----
context.moveTo(x0,0);
context.lineTo(x0,height);

//---X arrow---
context.moveTo(width,height/2);
context.lineTo(width-15,(height/2)+10);
context.moveTo(width,height/2);
context.lineTo(width-15,(height/2)-10);
//---Y arrow---
context.moveTo(width/2,0);
context.lineTo((width/2)-10,15);
context.moveTo(width/2,0);
context.lineTo((width/2)+10,15);

//X - signs
for(var i=x0; i<width; i+=50)
{
context.moveTo(i,(height/2)-7);
context.lineTo(i,(height/2)+7);
}
for(var i=x0; i>0; i-=50)
{
context.moveTo(i,(height/2)-7);
context.lineTo(i,(height/2)+7);
}

//Y - signs
for(var i=y0; i<height; i+=50)
{
context.moveTo((width/2)-7,i);
context.lineTo((width/2)+7,i);
}
for(var i=y0; i>0; i-=50)
{
context.moveTo((width/2)-7,i);
context.lineTo((width/2)+7,i);
}

context.stroke();

}```
```<!DOCTYPE html>
<html lang="pl">
<meta charset="utf-8" />
<title>Ploter</title>

<style>
body
{
background-color: #303030;
margin-right: auto;
margin-left: auto;
text-align: center;
}

h1, h2
{
}
</style>

<script src="app.js"></script>

<body>
<h1>Ploter XY</h1>
<main>
<section>
<div id="inputContainer">
<label for="inputA">a:</label>
<input id="inputA" type="text" />
<br />
<label for="inputB">b:</label>
<input id="inputB" type="text" />
<br />
<p>Equation: <span id="funEquation"></span></p>
<input id="confirmButton" type="button" value="Draw" onclick="plot()" >
</div>
<div id="plotContainer">
<canvas id="plotCanvas" height="500" width="700" />
</div>
<section>
</main>

</body>
</html>```