Черчение графика функции

@tima202 · Регистрация: 08.04.2018

Студворк — интернет-сервис помощи студентам

Здравствуйте, у меня проблема. С Html и JavaScript не знаком от слова совсем. Надо что бы на страничке чертился график функции a*x*x. Переменная a определяется положением бегунка. Наверное можно назвать это изменяемым графиком. У меня получилось что-то такое:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
    function graf() {
        var a = document.getElementById("a").value;
   
        let y = x => a*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 = -10; x <10; 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 = -10; i <= 10; i += 0.2) {
            ctx[i?'lineTo':'moveTo'](i*z, -y(i)*z);
        }
        ctx.stroke();
    }
</script>
</head>
<body>
<canvas width=500 height=500></canvas>
<p><input type="range" min="-10" max="10" step="0.01" id="a" oninput="graf()" value="1"></p>
</body>
</html>

Встретился с проблемами:
1. Не получается сделать так, что бы сетка отображалась с самого начала.
2. Если первое перемещение бегунка работает как надо, график чертится и всё хорошо, то стоит еще передвинуть бегунок, как всё летит.
Дайте пожалуйста пару советов по исправлению проблем. Заранее спасибо

@Ovederax · 16.09.2020, 05:12

Для начала стоит перенести скрипт в конец body, чтобы код выполнялся после отрисовки страницы

Сообщение от tima202

Не получается сделать так, что бы сетка отображалась с самого начала.

можно сразу вызвать функцию, чтобы она отрисовала график graf(),
но вызов функции должен быть после того как будет отрисована страница (см 1 предложение)

Сообщение от tima202

Если первое перемещение бегунка работает как надо, график чертится и всё хорошо, то стоит еще передвинуть бегунок, как всё летит.

как я понял это связано с translate, при каждом вызове график будет смещаься правее и ниже
переменные для получения html элементов можно вынести выше функции и расположить с ними создание контекста и translate() (в функцию переменные попадут извне, читайте про замыкания)
там есть еще проблемы:
1) canvas не очищается, все рисуется поверх
2) для сетки не задан цвет и ширина

Вот код если не сможете самостоятельно разобраться:
Cкрипт нужно поместить в конец body, чтобы он исполнялся только после того как все html элементы появились на экране

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
var inp = document.getElementById('a');
let c = document.querySelector('canvas');
let ctx = c.getContext('2d');
ctx.translate(c.width / 2, c.height / 2);
 
function graf() {
  ctx.clearRect(-c.width/2, -c.height / 2, c.width, c.height);
  const a = inp.value;
  let y = x => a * x * x; // функция
  let z = 40; // масштаб
  
  ctx.strokeStyle = 'black';
  ctx.lineWidth = 1;
  ctx.beginPath();
  for (let x = -10; x < 10; 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 = -10; i <= 10; i += 0.2) {
    ctx[i ? 'lineTo' : 'moveTo'](i * z, -y(i) * z);
  }
  ctx.stroke();
}
graf();

@tima202 · 16.09.2020, 10:33 **[ТС]**

Огромное спасибо за ответ. Я понял как исправлять такие ошибки. Отдельное спасибо за написанный код.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

@tima202 0 / 0 / 0 Регистрация: 08.04.2018 Сообщений: 13
	16.09.2020, 10:33 [ТС]
	Огромное спасибо за ответ. Я понял как исправлять такие ошибки. Отдельное спасибо за написанный код. 0

Черчение графика функции

Решение