|
Как в JawaScript Canvas нарисовать различные графики на разных участках числовой оси
Как в JawaScript Canvas нарисовать различные графики на разных участках числовой оси Х в Декартовой системе координат ?
|
Обычно, в JS на всей числовой оси X строиться график одной функции, например y(x) = x^2, на участке от 0 до 10, тоже например. А, надо построить графики нескольких функций на нескольких участках: y1(x) = x+1 на участке от 0 до 2; y2(x) = x^2+4 на участке от 2 до 5;y3(x) = x^2+2*x+1 на участке от 5 до 10; Фукции и интервалы выбраны совершенно произвольно.
|
Следует добавить, что это всё надо сделать на одной числовой оси Х
|
<html><head>
<script>
function DrawFn() {
var ctx = document.querySelector("canvas").getContext("2d");
var drawer = ctx.moveTo.bind(ctx);
var i, x0, x1, x2, x, y, el, fn, range;
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
for(i = 1; i <= 3; ++ i) {
el = document.getElementById("Fn" + i); // Обращаемся к одному из input-элементов
fn = el.value.split(/:/)[1]; // Выражение функции справа от двоеточия
range = el.value.split(/:/)[0].split(".."); // Интервал участка задаётся форматом "от..до" слева от двоеточия
x1 = parseInt(range[0]);
x2 = parseInt(range[1])
ctx.strokeStyle = el.style.color; // Цвет линии графика соответствует цвету input-текста
ctx.beginPath();
for(x0 = 0; x0 < ctx.canvas.width; ++ x0) {
x = x0 / ctx.canvas.width * (x2 - x1) - x1;
try {
with(Math) {
drawer(x0, ctx.canvas.height - eval(fn));
}
} catch(err) {
break;
}
drawer = ctx.lineTo.bind(ctx);
}
ctx.stroke();
}
}
</script>
</head>
<body onload='DrawFn()'>
Y1(x)=<input type=text id=Fn1 value='0..10:x**2' onchange='DrawFn()' style=color:magenta><br>
Y2(x)=<input type=text id=Fn1 value='0..2:x+1' onchange='DrawFn()' style=color:red><br>
Y3(x)=<input type=text id=Fn2 value='2..5:x**2+4' onchange='DrawFn()' style=color:orange><br>
Y4(x)=<input type=text id=Fn3 value='5..10:x**2+2*x+1' onchange='DrawFn()' style=color:blue><br>
<canvas width=800px height=600px></canvas>
</body>
|
Правильно ли, я понял, что графики выходят из отной точки - 0 ? Если, это так, то извините - это не совсем то, что требуется. В дествительности каждый из трёх графиков должен быть построен на указанном ему интервале на одной числовой оси Х
|
Вложений: 1
Думаю, надо добавить то, что это просто линии, так как не показаны координатные оси с разметкой и числовыми значениями по осям Х и Y
|
Высылаю файлы JS и HTML, где построен только один график. Может быть при использовании этих файлов можно решить мою проблему: надо построить графики нескольких функций на нескольких участках: y1(x) = x+1 на участке от 0 до 2; y2(x) = x^2+4 на участке от 2 до 5;y3(x) = x^2-2*x+1 на участке от 5 до 10; Функции и интервалы выбраны совершенно произвольно. а это всё надо сделать на одной числовой оси Х.
|
К сожалению, не получилось, или я не знаю, как в сообщение вложить
файлы JS и HTML
const canvasPlot = document.getElementById(`canvas_plot`);
const ctx = canvasPlot.getContext(`2d`);
//Рисуем сетку
const canvasPlotWidth = canvasPlot.clientWidth;
const canvasPlotHeight = canvasPlot.clientHeight;
const scaleX = 30; //расстояние между элементами сетки по Х
const scaleY = 30; //расстояние между элементами сетки по Y
//Рисуем главные оси
// Обычное расположение осей
//const xAxis = canvasPlotWidth / 2;
//const yAxis = canvasPlotHeight / 2;
// Уточнённое расположение осей за счёт сдвига осей
const xAxis = Math.round(canvasPlotWidth / scaleX / 2) * scaleX;
const yAxis = Math.round(canvasPlotHeight / scaleY / 2) * scaleY;
// Выбор шрифта и его вид, размер
ctx.font = `${Math.round(scaleX / 2)}px Arial`;
ctx.textAlign = `left`;
ctx.textBaseline = `top`;
ctx.beginPath();
ctx.strokeStyle = `#f5f0e8`;
var zz = 5; //Зазор между осями и числами нумерации чисел
for (let i = 0; i <= canvasPlotWidth; i = i + scaleX) {
ctx.moveTo(i, 0);
ctx.lineTo(i, canvasPlotHeight); // нанесение вертикальных линий разметки
ctx.fillText((i - xAxis) / scaleX, i + zz, yAxis + zz); //нанесение числовых значений на ось Х
}
for (let i = 0; i <= canvasPlotHeight; i = i + scaleY) {
ctx.moveTo(0, i);
ctx.lineTo(canvasPlotWidth, i); // нанесение горизонтальных линий разметки
ctx.fillText((yAxis - i) / scaleY, xAxis + zz, i + zz); //нанесение числовых значений на ось Y
}
ctx.stroke();
ctx.closePath(); //закрыть путь, чтобы рисовать новые линии другим цветом
var zxy = 20; //Зазор между осями и обозначением этих осей x,y
ctx.beginPath();
ctx.strokeStyle = `#000000`;
ctx.moveTo(xAxis, 0);
ctx.lineTo(xAxis, canvasPlotHeight);
ctx.fillText(`y`, xAxis - zxy, 0 ); // означение оси Y
ctx.moveTo(0, yAxis);
ctx.lineTo(canvasPlotWidth, yAxis);
ctx.fillText(`x`, canvasPlotWidth - zxy, yAxis - zxy ); // означение оси X
ctx.stroke();
ctx.closePath(); //закрыть путь, чтобы рисовать новые линии другим цветом
//ПРЕОБРАЗОВАНИЕ CANVAS СИСТЕМУ КООРДИНАТ В ДЕКАРТОВУ СИСТЕМУ КООРДИНАТ
// Рисуем график функции
ctx.fillStyle = `#ff0000`; // цвет графика чёрный
//ctx.lineWidth = 0.5 //толщина линии
for (let i = 0; i <= canvasPlotWidth; i++) {
const x = (i - xAxis) / scaleX;
const y = Math.pow(x, 2);
ctx.fillRect(x * scaleX + xAxis, yAxis - scaleY * y, 4, 4);
|
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link href="./Graf.css" rel="stylesheet"> </head> <body style= "margin": 0;> <canvas id="canvas_plot" width="700" height="500"></canvas> <script src="./Graf.js"></script> </body> </html> |
Ссылка на график file:///C:/Users/%D0%98%D0%97%D0%9E/Desktop/JS1/Graf.html
|
| Часовой пояс GMT +3, время: 15:56. |
|