首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >使用JavaScript和HTML5画布绘制线性函数

使用JavaScript和HTML5画布绘制线性函数
EN

Stack Overflow用户
提问于 2018-07-06 02:44:18
回答 1查看 1.1K关注 0票数 1

我的代码中可能会有什么错误?我尝试绘制一个线性函数(y=a*x+b),输入ab作为输入,每次直线经过点( 0 ,0)时,即使我设置了b != 0,也是如此。

为此,我使用了canvas和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>
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51198004

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档