<html><head>
<script>
function DrawFn() {
var ctx = document.querySelector("canvas").getContext("2d");
var width = ctx.canvas.width;
var height = ctx.canvas.height;
var size_x = width - 40;
var size_y = height - 24;
var drawer;
var i, x0, x1, x2, x, y, max_y, el, fn, range;
var els = document.getElementsByName("Fn_X");
ctx.save();
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.strokeStyle = "black";
ctx.fillStyle = "black";
ctx.beginPath();
ctx.translate(32, 8);
ctx.rect(0, 0, size_x, size_y); // Черртим рамку
for(i = 0; i <= 10; ++ i) {
// Размечаем ось X
ctx.moveTo(i * size_x / 10, 0);
ctx.lineTo(i * size_x / 10, size_y);
ctx.fillText(String(i), i * size_x / 10 - 4, size_y + 16);
if(i & 1)
continue;
// Размечаем ось Y
ctx.moveTo(0, i * size_y / 10);
ctx.lineTo(size_x, i * size_y / 10);
ctx.fillText(String(i * 10), -16, (10 - i) * size_y / 10 + 8);
}
ctx.stroke();
// Очищаем основную област графика
ctx.clearRect(8, 8, size_x - 16, size_y - 16);
for(i = 0; i < els.length; ++ i) {
ctx.strokeStyle = els[i].style.color; // Цвет линии графика соответствует цвету input-текста
fn = els[i].value.split(/:/)[1]; // Выражение функции справа от двоеточия
range = els[i].value.split(/:/)[0].split(".."); // Интервал участка задаётся форматом "от..до" слева от двоеточия
x1 = parseInt(range[0]);
x2 = parseInt(range[1]);
max_y = size_y;
ctx.beginPath();
drawer = ctx.moveTo.bind(ctx);
for(x0 = size_x * x1 / 10; x0 < size_x * x2 / 10; ++ x0) {
x = x0 / size_x * 10;
try {
with(Math) {
drawer(x0, y = size_y - eval(fn) * size_y / 100);
max_y = Math.min(max_y, y);
}
} catch(err) {
break;
}
drawer = ctx.lineTo.bind(ctx);
}
ctx.stroke();
ctx.beginPath();
ctx.moveTo(x0, 0);
ctx.lineTo(x0, size_y);
ctx.setLineDash([1, 2]);
ctx.strokeStyle = "black";
ctx.stroke();
ctx.setLineDash([]);
fn = fn.replace(/\*\*2/g, "\u00B2").replace(/\*\*3/g, "\u00B3").replace(/\*/g, "");
ctx.fillText(fn, size_x * (x1 + (x2 - x1) / 2) / 10, max_y);
}
ctx.restore();
}
</script>
</head>
<body onload='DrawFn()'>
Y2(x)=<input type=text name=Fn_X value='0..2:x+1' onchange='DrawFn()' style=color:magenta><br>
Y3(x)=<input type=text name=Fn_X value='2..5:x**2+4' onchange='DrawFn()' style=color:red><br>
Y4(x)=<input type=text name=Fn_X value='5..10:x**2-2*x+1' onchange='DrawFn()' style=color:orange><br>
<canvas width=400px height=200px></canvas>
</body>