Статья по теме:
Демо JavaScript:
При нажатии на кнопку "Нарисовать" строится функция, проходящая через точки, заданные кликом мыши.
<html> <head> <meta charset="utf-8"> </head> <body> <canvas id="fl" width="600" height="600"></canvas> <br /> <input type="button" onclick="del()" value="Сбросить"> <input type="button" onclick="draw()" value="Нарисовать"> <script type="text/javascript" > var canvas = document.getElementById('fl') var ctx=canvas.getContext('2d'); let rect=canvas.getBoundingClientRect(); var points=[];//массив координат точек сеточной функции относительно выбранной системы координат var count=0;//количество точек в массиве points 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 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 lagr(x0)//подстановка x0 в многочлен Лагранжа { var y0=0;//значение многочлена в точке y0 var step; for(var i=0;i<points.length;i++) { step=points[i].y; for(var j=0;j<points.length;j++)//считаем множитель при i-ом значении { //сеточной функции if(i!=j) step=step*(x0-points[j].x)/(points[i].x-points[j].x); } y0+=step; } return y0; } function drawg()//отрисовка графика { 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=lagr(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) { if(count==0) fon(); 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); count++; //рисуем новую точку: ctx.beginPath(); ctx.fillStyle="red"; ctx.moveTo(tx,ty); ctx.arc(tx,ty,3,0,2*Math.PI); ctx.fill(); ctx.closePath(); // } } fon(); function del()//очищаем массив { points.length=0; count=0; fon(); } function draw()//рисуем график { normArr(); drawg(); points.length=0; count=0; } </script> </body> </html>
| Прикрепленный файл | Размер |
|---|---|
| gapon_lagr.zip | 1.58 кб |