Создать web страницу, отображающую график функции y=ax^2+bx+c На странице задаем значения переменных a,b,c и области границ для x,y.
График расположить на холсте (элемент типа canvas) размером 300 на 200 точек.
Параметры функции и области рисования задаются на форме. Организовать проверку правильности ввода этих данных.
Кнопка имеет два значения "Нарисовать" и "Очистить". При нажатии на кнопку в состоянии "Нарисовать" на холсте отображался график функции с заданными параметрами, а при нажатии в состоянии "Очистить" - холст очищается (удаляется только график).
оси координат должны быть выделены цветом или толщиной линии и проходить через ноль, если он находится в области, либо проходить вдоль границы области, ближайшей к нулю.
Цвет функции должен быть отличен от цвета осей и координатной сетки.
Координатная сетка 10x10 должна быть привязана к положению координатных осей.
Соответствующие числовые значения границ области отрисовки должны отображаться у границ холста, слева и сверху от координатных осей.
Задание вызвало трудность на этапе отрисовки функции. Прилагаю сюда js код, который имеется на данный момент. Не судите строго, в canvas полез первый день, так что прошу отнестись с пониманием.
window.onload = () => {
let step = 20
let cnvs = document.querySelector('canvas')
let ctx = cnvs.getContext('2d')
for (var i = step; i<cnvs.width; i+=step){//вертикальные
ctx.beginPath();
ctx.strokeStyle = '#7a7979';
ctx.lineWidth = 0.5;
ctx.moveTo(i, 0);
ctx.lineTo(i, cnvs.height);
ctx.closePath();
ctx.stroke();
}
for (var i = step; i<cnvs.height; i+=step){//Горизонтальные
ctx.beginPath();
ctx.moveTo(0, i);
ctx.lineTo(cnvs.width, i);
ctx.closePath();
ctx.stroke();
}
/*ctx.beginPath()
for(let x = -4; x<4;x++){
ctx.moveTo(x*z,-cnvs.height/2)
ctx.lineTo(x*z,cnvs.height/2)
ctx.moveTo(-cnvs.width/2,x*z)
ctx.lineTo(cnvs.width/2,x*z)
}
ctx.stroke()*/
//Ось X
ctx.beginPath();
ctx.moveTo(0, cnvs.height/2);
ctx.lineTo(cnvs.width, cnvs.height/2);
ctx.strokeStyle = 'red';
ctx.lineWidth = 2;
ctx.closePath();
ctx.stroke()
// ось Y
ctx.beginPath();
ctx.moveTo(cnvs.width/2+10, 0);
ctx.lineTo(cnvs.width/2+10, cnvs.height);
ctx.strokeStyle = 'green';
ctx.closePath();
ctx.stroke();
console.log(cnvs.width)
console.log(cnvs.height)
}
<canvas></canvas>