Координаты карты холста

Question

Я хочу нарисовать exp (x) для x в [-5, 5] на холсте 800x800px.Мне удалось отобразить [-5, 5] на [0, 800] на горизонтальной оси, но я изо всех сил пытаюсь отобразить [exp (-5), exp (5)] на [800, 0] на вертикальной оси,Есть идеи, как это сделать?Заранее спасибо.

Answer 1

Вот подробный пример того, как это сделать.i и j - координаты холста. Белые x и y - координаты функции.

По сути, отображение от y до j аналогично обратному отображению от x до i.Но вы должны вычесть результат из высоты, поскольку при рисовании на холсте координата y меняется на противоположную.

var c = document.querySelector('canvas');
var ctx = c.getContext('2d');
ctx.beginPath();

const width = 400;
const height = 150;

// The bounds
const minx = -5;
const maxx = 5;
const miny = Math.exp(-5);
const maxy = Math.exp(5);

ctx.moveTo(0, height);

for (let i = 0; i < width; i += width / 100) {
  // Get x from canvas coordinates
  const x = i / width * (maxx - minx) + minx;
  const y = Math.exp(x);
  // Transform y to canvas coordinates
  const j = height - (y - miny) / (maxy - miny) * height;
  // Draw in canvas coordinates
  ctx.lineTo(i, j);
}

ctx.stroke();

canvas {
  border: 1px solid black;
}

<canvas width=400 height=150></canvas>