Знатоки JS подскажите

Question

Знатоки JS подскажите

F f Ученик (172), на голосовании 1 год назад

Люди которые разбираются в Js можете объяснить этот код пожалуйста. Просто сам не изучал Js , но в проекте нужно именно поэтому и спрашиваю.
Если можно , то желательно немного детальнее.
Заранее спасибо.

<canvas id="myCanvas" width="500" height="500" onmousemove="cnvs_onMouseMove(event)" onclick="cnvs_onMouseClick(event)" style="border:1px solid #d3d3d3; float: left;">
Your browser does not support the HTML canvas tag.</canvas>
<p id="msg_text"></p><button onclick="calcLine()">Calc line</button> <button onclick="calcParabola()">Calc parabola</button>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

function drawLineKB(k, b) {
var x0 = -1;
var y0 = k*x0+b;
var x1 = 1;
var y1 = k*x1+b;
ctx.moveTo(cnvs_x_to_nx(x0), cnvs_y_to_ny(y0));
ctx.lineTo(cnvs_x_to_nx(x1), cnvs_y_to_ny(y1));
ctx.stroke();
};

function drawParabola(k, b, c) {
for(var x=-1; x<=1; x+=0.01) {
ctx.fillRect(cnvs_x_to_nx(x), cnvs_y_to_ny(k*(x-b)*(x-b)+c), 1, 1);
};
};

var lf = 0;

function calcLine() {
var x,y,k,b,dk,db,dk0,db0;
dk0 = 0;
db0 = 0;
alpha = 0.2;
beta = 0.3;
k = 0.21;
b = 0.2;
if(lf != 0) clearInterval(lf);
lf = setInterval(function () {
for(var i=0; i<xArray.length; i++) {
x = xArray[i];
y = k*x+b;
dk = alpha*dk0 - beta*(y-yArray[i])*x;
db = alpha*db0 - beta*(y-yArray[i]);
k = k + dk;
b = b + db;
dk0 = dk;
db0 = db;
};
document.getElementById("msg_text").innerHTML = "k,b " + k + " " + b;
ctx.fillStyle = "#00FF00";
drawLineKB(k, b);
}, 1);
};

function calcParabola() {
var x,y,k,b,dk,db,dk0,db0,c,dc,dc0;
dk0 = 0;
db0 = 0;
dc0 = 0;
alpha = 0.01;
beta = 0.01;
k = 0.21;
b = 0.2;
c = 0.1;
if(lf != 0) clearInterval(lf);
lf = setInterval(function () {
for(var i=0; i<xArray.length; i++) {
x = xArray[i];
y = k*(x-b)*(x-b)+c;
dk = alpha*dk0 - beta*(y-yArray[i])*(x-b)*(x-b);
db = alpha*db0 - beta*(y-yArray[i])*2*k*(x-b)*(-1);
dc = alpha*dc0 - beta*(y-yArray[i]);
k = k + dk;
b = b + db;
c = c + dc;
dk0 = dk;
db0 = db;
dc0 = dc;
};
document.getElementById("msg_text").innerHTML = "k " + k + " b " + b + " c " + c;
ctx.fillStyle = "#00FF00";
drawParabola(k, b, c);
}, 1);
};

Answer 1

Этот код создает HTML-страницу с элементами управления, которые позволяют рисовать линии и параболы на холсте (canvas) с помощью JavaScript.

Первая строка создает холст с идентификатором "myCanvas" и размером 500x500 пикселей. События onmousemove и onclick привязываются к холсту, чтобы обрабатывать движение мыши и клики на нем.

Далее идут две кнопки, которые вызывают функции calcLine() и calcParabola() при нажатии.

Функция drawLineKB() рисует линию на холсте с помощью метода moveTo() и lineTo().

Функция drawParabola() рисует параболу на холсте, используя цикл for и метод fillRect().

Функции calcLine() и calcParabola() вычисляют коэффициенты линии и параболы соответственно, используя метод setInterval() для обновления холста каждые 1 миллисекунду.

В конце скрипта определены функции cnvs_x_to_nx() и cnvs_y_to_ny(), которые преобразуют координаты на холсте в пиксели.

Answer 2

Это html страница с холстом 500 * 500 и двумя кнопками с текстом нарисовать параболлу и нарисовать линию. При нажатии вызываются соответствующие функции. Также параметры выводятся на экран в текст