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

102

01 декабря 2020, 07:10

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

Answer 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();

<canvas width=175 height=175></canvas>

Answer 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; 
}

<svg viewbox="0 0 650 190"> 
    <path transform="translate(100,100)" superformula="30,5,5,2,1,1,7,7"/> 
    <path transform="translate(200,100)" superformula="30,8,8,2,1,0.6,5,8"/> 
    <path transform="translate(300,100)" superformula="30,4,4,2,1,2,5,2"/> 
    <path transform="translate(400,100)" superformula="30,4,4,1,1,2,1,1"/> 
    <path transform="translate(500,100)" superformula="30,12,12,0.3,1,1,0,10"/> 
    <path transform="translate(600,100)" superformula="30,5,5,1000,1,1,600,600"/> 
</svg>