Статья по теме:
Демо JavaScript:
Построение функции, проходящей через заданные точки, с помощью полинома Ньютона. Функция строится при добавлении новой точки с помощью клика.
<html> <head> <meta charset="utf-8"> </head> <body> <canvas id="fl" width="600" height="600"></canvas> <br /> <input type="button" onclick="del()" value="Сбросить"> <script type="text/javascript"> var canvas = document.getElementById('fl'); var ctx=canvas.getContext('2d'); let rect=canvas.getBoundingClientRect(); var points=[];//массив координат точек сеточной функции относительно выбранной системы координат var f=[];//матрица разделенных разностей var count=0;//количество точек в массиве points fon(); var point=function(x,y) { this.x=x; this.y=y; } function fon()//рисуем координатную сетку { ctx.beginPath(); ctx.clearRect(0,0,600,600); ctx.fillStyle="white"; ctx.fillRect(0,0,600,600); ctx.strokeStyle="grey"; for(var i=0;i<=600;i+=75) { for(var j=0;j<=600;j+=20) { ctx.moveTo(i,j); ctx.lineTo(i,j+10); ctx.moveTo(j,i); ctx.lineTo(j+10,i); } } ctx.stroke(); ctx.closePath(); ctx.beginPath(); ctx.lineWidth=2; ctx.moveTo(300,0); ctx.lineTo(300,600); ctx.moveTo(0,300); ctx.lineTo(600,300); ctx.stroke(); ctx.closePath(); ctx.beginPath(); ctx.fillStyle="black"; ctx.textBaseline="top"; for(i=-4;i<=4;i++) { ctx.fillText(i,300+i*75,300); ctx.fillText(i,300,300-i*75); } ctx.fill(); ctx.closePath(); } function drawp()//отрисовка точек сеточной функции { ctx.beginPath(); ctx.fillStyle="red"; for(var i=0;i<points.length;i++) { ctx.moveTo(points[i].x*75+300,300-75*points[i].y); ctx.arc(points[i].x*75+300,300-75*points[i].y,3,0,2*Math.PI); } ctx.fill(); ctx.closePath(); } function prov(xn,yn)//проверяем, есть ли точка с такой х-координатой в массиве points { for(var i=0;i<points.length;i++) { if(points[i].x==xn) return 0; } return 1; } function normArr()//упорядочиваем точки по х-коорд { for (var i = 0; i < points.length-1; i++) { for (var j = 0; j < points.length-1-i; j++) { if (points[j].x > points[j + 1].x) { tempx = points[j].x;tempy=points[j].y; points[j].x = points[j + 1].x;points[j].y = points[j + 1].y; points[j + 1].x = tempx;points[j + 1].y = tempy; } } } } function razd()//вычисление разделенных разностей { f[0]=[]; for(i=0;i<points.length;i++) { f[0][i]=points[i].y; } for(i=1;i<points.length;i++) { f[i]=[]; for(j=0;j<points.length-i;j++) { f[i][j]=(f[i-1][j+1]-f[i-1][j])/(points[j+i].x-points[j].x); } } } function newt(x0)//подстановка x0 в многочлен Ньютона { var rez=0;//значение многочлена в точке y0 for(var i=0;i<points.length;i++) { mn=1;//множитель при разделенной разности i-го порядка for(var l=0;l<i;l++) mn=mn*(x0-points[l].x); rez=f[i][0]*mn+rez; } return rez; } function drawg()//отрисовка графика { fon(); drawp(); razd(); var sty; ctx.beginPath(); ctx.strokeStyle="black"; ctx.moveTo(300+75*points[0].x,300-75*points[0].y); for(var i=0;i<points.length-1;i++) { for(var stx=points[i].x;stx<=points[i+1].x;stx+=0.01) { sty=newt(stx); ctx.lineTo(300+75*stx,300-75*sty); } } ctx.lineTo(300+75*points[i].x,300-75*points[i].y); ctx.stroke(); ctx.closePath(); } canvas.onclick=function(event) { var tx = event.clientX-rect.left;//получение координат var ty = event.clientY-rect.top;//точек относительно экрана if(prov(tx/75-4,4-ty/75)) { points[count]=new point(tx/75-4,4-ty/75); normArr(); drawg(); count++; } } function del() { points.length=0; count=0; fon(); } </script> </body> </html>
| Прикрепленный файл | Размер |
|---|---|
| gapon_newt.zip | 1.63 кб |