Показать сообщение отдельно
  #11 (permalink)  
Старый 23.08.2022, 23:17
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 456

IZUM,
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Графики</title>
</head>
<body>

<canvas id="canvas" width="400" height="200" style="border:1px solid grey"></canvas>

<script>
function createPath(x1, x2, y, sx, sy) {
  const path = new Path2D();
  for (let x = x1; x <= x2; x++) {
    if (x == x1) {
      path.moveTo(x * sx, y(x) * sy);
    } else {
      path.lineTo(x * sx, y(x) * sy);
    }
  }
  return path;
}

const ctx = canvas.getContext('2d');

ctx.translate(0, 200);
ctx.scale(1, -1);

ctx.strokeStyle = 'red';
ctx.stroke(createPath(0,  2, x => x + 1, 30, 1));
ctx.strokeStyle = 'green';
ctx.stroke(createPath(2,  5, x => x ** 2 + 4, 30, 1));
ctx.strokeStyle = 'blue';
ctx.stroke(createPath(5, 10, x => x ** 2 + 2 * x + 1, 30, 1));
</script>

</body>
</html>
Ответить с цитированием