golloper писал(а): 28 авг 2025, 09:07
У автора программы, Сергея, есть обучающее видео с примером. Как раз про графики .
Спасибо. Смотрел ролик Сергея Глушенко
Увы, в написании кода на HTML пока на стадии только списать.-)
Буду изучать ролик. Особенно данные с массива.
Про сетку. Пришлось попросить ИИ. Главное, правильно сформулировать вопрос. Кое какие успехи есть. Для начала только сетка с линиями XY и посередине красная точка.
Вот что выдал ИИ,
► Показать
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Пример графика с сеткой на canvas</title>
<style>
canvas {
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
// Получить элемент canvas и контекст отрисовки
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// Нарисовать горизонтальные линии
for (var y = 20; y <= 280; y += 20) {
ctx.beginPath();
ctx.moveTo(20, y);
ctx.lineTo(380, y);
ctx.strokeStyle = '#eee';
ctx.stroke();
}
// Нарисовать вертикальные линии
for (var x = 20; x <= 380; x += 20) {
ctx.beginPath();
ctx.moveTo(x, 20);
ctx.lineTo(x, 280);
ctx.strokeStyle = '#eee';
ctx.stroke();
}
// Нарисовать оси координат
ctx.beginPath();
ctx.moveTo(20, 280);
ctx.lineTo(380, 280);
ctx.moveTo(20, 20);
ctx.lineTo(20, 280);
ctx.strokeStyle = '#000';
ctx.stroke();
// Нарисовать точку на графике
ctx.beginPath();
ctx.arc(200, 150, 5, 0, 2 * Math.PI);
ctx.fillStyle = 'red';
ctx.fill();
ctx.strokeStyle = 'red';
ctx.stroke();
</script>
</body>
</html>
А вот так выглядет в браузере,
Главное начало есть. Потихоньку буду черпать информацию с различных источников, возможно удастся построить желанное устройство.
Графика_1.flp
У вас нет необходимых прав для просмотра вложений в этом сообщении.
