如何用JavaScript和HTML 5画布绘制线性函数?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

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

我的代码有什么问题?我试图画一个线性函数(y=a)*(x+b)打字一个作为输入,每次行通过点(0,0)时,即使我设置了=0。

为此,我使用了画布和JavaScript。以及CSS,但是元素的样式在这里并不重要。

有人能指出我的错误吗?

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

    h1,
    h2 {
      color: #ADADAD;
    }
  </style>
  <script>
    var canvas;
    var context;

    window.onload = function() {
      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>
</head>
<body>
  <header>
    <h1>Ploter XY</h1>
  </header>
  <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>
提问于
用户回答回答于

当你带着ab从输入框中,它们都以字符串的形式出现,你需要将它们转换为Number下面的方程式才能起作用。

错误发生在以下行

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

在这里如果x = 11, b = 22, x = 1从那以后ab是字符串而不是数学加法,有一个字符串串连穿孔,值y变成1122/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;

你必须在这两种情况下都使用比例。xy不只是y。应该如下所示

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

x /= scale;
y /= scale;

此外,标度太大,因此缩小了小值的图形大小。

请找到下面的工作示例

var canvas;
var context;

window.onload = function()
{
	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">
 <head>
    <meta charset="utf-8" />
    <title>Ploter</title>

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

        h1, h2
        {
            color: #ADADAD;
        }   
    </style>

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



 </head>
 <body>
    <header>
        <h1>Ploter XY</h1>
    </header>
    <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>

扫码关注云+社区

领取腾讯云代金券