数值分析函数画图模版：拉格朗日插值

新学期开了数值分析课，老师要求实验需要编写函数并使用MATLAB之类的工具画出函数图像，怎奈何MATLAB需要花费很多的前并且不是很好用，canvas画图太过于繁琐，所以就开发了一种js暴力画图方法，来完成整个课程的设计。

思路探讨

画图无非就是将一个个的小圆点尽可能的小并且尽可能的密，在不考虑算法时间复杂度和性能的前提下，我尝试用函数创建大量的圆点并且通过position进行定位实现本次实验的效果，完成后的效果如下（点稍微有点大导致锯齿化严重，后续可优化）

拉格朗日插值法

var x = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120];
var y = [5, 1, 7.5, 3, 4.5, 8.8, 15.5, 6.5, -5, -10, -2, 4.5, 7];
function Lagrange(element) {
    var Ln = 0.0;
    for (var k = 0; k <= 12; k++) {
        Ln += y[k] * L(k, element);
    }
    return Ln;
    // console.log(Ln);
}
function L(k, element) {
    var Lx = 1;
    for (var j = 0; j <= 12; j++) {
        if (j != k) {
            Lx = Lx * ((element - x[j]) / (x[k] - x[j]));
        }
    }
    return Lx;
}

暴力画图函数及代码

<!-- HTML -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>数值分析实验</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            height: 500px;
            width: 800px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-top: -250px;
            margin-left: -400px;
            border-left: 2px solid #333;
        }
        .circle {
            width: 10px;
            height: 10px;
            background-color: #000;
            border-radius: 20px;
            position: absolute;
        }
        .sign{
            height: 2px;
            width: 800px;
            background-color: #333;
            position: absolute;
            top: 250px;
        }
    </style>
</head>
<body>
    <div class="box" id="main">
        <div class="sign"></div>
    </div>
</body>
</html>
<!-- 暴力画图算法 -->
function insert(x, y) {
    console.log(y);
    var main = document.getElementById("main");
    var div = document.createElement("div");
    div.className = "circle";
    div.style.top = (250 - y*5 + 5) + "px";
    div.style.left = (x*5 - 5) + "px";
    main.appendChild(div);
}
function maine() {
    for (var b=0; b <= 120;) {
        insert(b, Lagrange(b));
        b+=0.01;
    }
}
maine();