Форум

IZUM · #1 (**permalink**) 22.08.2022, 17:47

Как в JawaScript Canvas нарисовать различные графики на разных участках числовой оси Х в Декартовой системе координат ?

Rise · #2 (**permalink**) 23.08.2022, 09:47

Сообщение от IZUM

различные графики

Например?

IZUM · #3 (**permalink**) 23.08.2022, 18:27

Обычно, в 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; Фукции и интервалы выбраны совершенно произвольно.

IZUM · #4 (**permalink**) 23.08.2022, 19:37

Следует добавить, что это всё надо сделать на одной числовой оси Х

Alikberov · #5 (**permalink**) 23.08.2022, 20:25

<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>

IZUM · #6 (**permalink**) 23.08.2022, 21:56

Правильно ли, я понял, что графики выходят из отной точки - 0 ? Если, это так, то извините - это не совсем то, что требуется. В дествительности каждый из трёх графиков должен быть построен на указанном ему интервале на одной числовой оси Х

IZUM · #7 (**permalink**) 23.08.2022, 22:15

Думаю, надо добавить то, что это просто линии, так как не показаны координатные оси с разметкой и числовыми значениями по осям Х и Y

IZUM · #8 (**permalink**) 23.08.2022, 23:02

Высылаю файлы JS и HTML, где построен только один график. Может быть при использовании этих файлов можно решить мою проблему: надо построить графики нескольких функций на нескольких участках: y1(x) = x+1 на участке от 0 до 2; y2(x) = x^2+4 на участке от 2 до 5;y3(x) = x^2-2*x+1 на участке от 5 до 10; Функции и интервалы выбраны совершенно произвольно. а это всё надо сделать на одной числовой оси Х.

IZUM · #9 (**permalink**) 23.08.2022, 23:09

К сожалению, не получилось, или я не знаю, как в сообщение вложить
файлы 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);

IZUM · #10 (**permalink**) 23.08.2022, 23:14

<!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>

Форум

Справочник

Discord чат

Курсы javascript