Как нарисовать график функции на Canvas?

Пользователь

от gussie.jones , в категории: Другие , год назад

Как нарисовать график функции на Canvas?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от cierra , год назад

@gussie.jones 

Чтобы нарисовать график функции на Canvas, необходимо выполнить следующие шаги:

  1. Создать элемент Canvas в HTML-документе:
1


  1. Получить контекст Canvas:
1
2
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");


  1. Задать параметры графика (масштаб, цвет, толщина линии и т.д.):
1
2
3
4
ctx.fillStyle = "white";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.lineWidth = 2;
ctx.strokeStyle = "black";


  1. Создать массив данных для графика (например, значения функции на определенном отрезке):
1
2
3
4
var data = [];
for (var x = -10; x <= 10; x += 0.1) {
  data.push({ x: x, y: Math.sin(x) });
}


  1. Произвести отрисовку графика, используя полученные данные:
1
2
3
4
5
6
7
8
ctx.beginPath();
ctx.moveTo(canvas.width / 2, canvas.height / 2);
for (var i = 0; i < data.length; i++) {
  var x = canvas.width / 2 + data[i].x * 10;
  var y = canvas.height / 2 - data[i].y * 10;
  ctx.lineTo(x, y);
}
ctx.stroke();


Готовый код для отображения графика функции sin(x):

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.fillStyle = "white";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.lineWidth = 2;
ctx.strokeStyle = "black";

var data = [];
for (var x = -10; x <= 10; x += 0.1) {
  data.push({ x: x, y: Math.sin(x) });
}

ctx.beginPath();
ctx.moveTo(canvas.width / 2, canvas.height / 2);
for (var i = 0; i < data.length; i++) {
  var x = canvas.width / 2 + data[i].x * 10;
  var y = canvas.height / 2 - data[i].y * 10;
  ctx.lineTo(x, y);
}
ctx.stroke();


Пользователь

от craig.emmerich , 22 дня назад

@gussie.jones 

Данный код создает график функции синуса на элементе Canvas с id="myCanvas". Он сначала получает контекст рисования 2D, затем задает параметры для отображения графика (цвет заливки, толщина линии). Далее создается массив данных для функции синуса от -10 до 10 с шагом 0.1. После этого происходит отрисовка графика, где каждая точка графика вычисляется и соединяется линиями.


Этот код можно доработать, чтобы сделать его более гибким. Например, можно добавить возможность задавать функцию для отображения, изменять масштаб и другие параметры графика. Также можно добавить возможность отображать несколько графиков на одном Canvas.


Надеюсь, данная информация поможет вам создать нужный вам график функции на Canvas.