@gussie.jones
Чтобы нарисовать график функции на Canvas, необходимо выполнить следующие шаги:
- Создать элемент Canvas в HTML-документе:
- Получить контекст Canvas:
1
2
|
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
|
- Задать параметры графика (масштаб, цвет, толщина линии и т.д.):
1
2
3
4
|
ctx.fillStyle = "white";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.lineWidth = 2;
ctx.strokeStyle = "black";
|
- Создать массив данных для графика (например, значения функции на определенном отрезке):
1
2
3
4
|
var data = [];
for (var x = -10; x <= 10; x += 0.1) {
data.push({ x: x, y: Math.sin(x) });
}
|
- Произвести отрисовку графика, используя полученные данные:
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();
|
