График функции на JavaScript

#javascript #html #css #svg #canvas

Необходимо с помощью JavaScript построить график функции y = х^2 + (е^2x)/(х-2) где
e - экспонента (в степени 2*x), x = -5 и с шагом в 0.1 (т.е. -5 + 0.1) до 10 (можно
и до 1). 
Прошу помощи, или хотя бы ссылку на ресурс где объясняется как это можно сделать. 
Спасибо за внимание.
    

Ответы

Ответ 1

вот вам y = x^2 на интервале [-2,2]





let y = x => x*x; // функция
let z = 40; // масштаб
let c = document.querySelector('canvas');
let ctx = c.getContext('2d');

// центровочка
ctx.translate(c.width/2, c.height/2)
   
// сетка
ctx.beginPath();
for (let x = -3; x <3; x++) {
  ctx.moveTo(x*z, -c.height/2);
  ctx.lineTo(x*z, c.height/2);
  ctx.moveTo(-c.width/2, x*z);
  ctx.lineTo(c.width/2, x*z);
}
ctx.stroke();

// график функции
ctx.strokeStyle = "red";
ctx.lineWidth = 3;
ctx.beginPath();
for (var i = -2; i <= 2; i += 0.2) {
  ctx[i?'lineTo':'moveTo'](i*z, -y(i)*z);
}
ctx.stroke();



Ответ 2

Вот вариант при помощи svg, рисуем суперформулу.

В полярной системе координат, суперформула выглядит так:

, где  радиус,  - угол

Вот такие фигуры получаются если подставлять в эту формулу различные коэффициенты,
(смотрите сниппет для подробностей):





function superformula(phi, r, m1, m2, n1, a, b, n2, n3) {
    with (Math) {
        // считаем значение значение суперформулы для угла phi
        let d = pow( pow(abs(cos(m1*phi/4))/a, n2) + 
                     pow(abs(sin(m2*phi/4))/b, n3), -1/n1) * r; 
        // переводим в декартову систему координат       
        return `${(d*cos(phi))},${(d*sin(phi))}`; 
    }
}

// считаем n значений для углов в диапазоне [0, 2*PI] через равные промежутки
// и собираем все значение в команды пути для svg path
function pathD(n, params) {
    return `M${Array(n).fill(0).map((e, i) => superformula(i/n*Math.PI*2, ...params))}Z`;
}

document.querySelectorAll('path[superformula]').forEach(path => {
    path.setAttribute('d', pathD(200, path.getAttribute('superformula').split(',')))
})
body {
  margin:0;
  overflow: hidden;
}

svg {
  display: inline-block;
  height: 90vh;
  margin-left: -25px;
}

path {
  fill: none;
  stroke: red;
  stroke-width: 2px;
}