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

@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 **[ТС]**

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

Новые блоги и статьи Все статьи Все блоги /
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .

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

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

Решение