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

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

от gussie.jones , в категории: Другие , 8 месяцев назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

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

от cierra , 8 месяцев назад

@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();