简单的Javascript图形工具不起作用：

编程问答 2022-06-06

问题描述

该程序的预期结果如下...

  1. 我在文本框中输入任何实数。这个数字是y = __x的线性方程的一个因数。
  2. 在键入时释放键，就会在画布上显示一条线，对函数进行建模。

实际上，当我释放一个键时，相同的水平线会出现在画布的底部。当手动将因子输入代码时，画布将显示预期结果。请注意，我已删除了该问题不需要的所有代码，因此实际页面并不漂亮。

<html>
    <body>
        <input type="text" id="factor" size="1" onkeyup="graph()">
        <canvas id="myCanvas" width="700" height="700" style="border:2px solid black;"></canvas>
        <script>
            var factor = Number(document.getElementById("factor").value);
            var c = document.getElementById("myCanvas");
            var ctx = c.getContext("2d");
            ctx.scale(1,-1);
            
            function graph() {
                if ((factor*700) >= 700) {
                    ctx.beginPath();
                    ctx.moveto(0,-700);
                    ctx.lineto(700/factor,0);
                    ctx.stroke();
                } else {
                    ctx.beginPath();
                    ctx.moveto(0,-700);
                    ctx.lineto(700,(factor*700)-700);
                    ctx.stroke();
                };
            };
        </script>
    </body>
</html>

解决方法

发现我需要在我的graph（）函数中声明因子变量。

graphinghtmljavascript