1

Создать web страницу, отображающую график функции y=ax^2+bx+c На странице задаем значения переменных a,b,c и области границ для x,y.

  1. График расположить на холсте (элемент типа canvas) размером 300 на 200 точек.

  2. Параметры функции и области рисования задаются на форме. Организовать проверку правильности ввода этих данных.

  3. Кнопка имеет два значения "Нарисовать" и "Очистить". При нажатии на кнопку в состоянии "Нарисовать" на холсте отображался график функции с заданными параметрами, а при нажатии в состоянии "Очистить" - холст очищается (удаляется только график).

  4. оси координат должны быть выделены цветом или толщиной линии и проходить через ноль, если он находится в области, либо проходить вдоль границы области, ближайшей к нулю.

  5. Цвет функции должен быть отличен от цвета осей и координатной сетки.

  6. Координатная сетка 10x10 должна быть привязана к положению координатных осей.

  7. Соответствующие числовые значения границ области отрисовки должны отображаться у границ холста, слева и сверху от координатных осей.

Задание вызвало трудность на этапе отрисовки функции. Прилагаю сюда 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>  
Данное изображение взято с моего курса и показывает как должно выглядеть это задание в финале

введите сюда описание изображения

2

1 ответ 1

6

Как-то так:

// Ваша формула
let y = x => 2*x*x+3*x-1;
let scale = 20;
let step = 1;
let cnvs = document.querySelector('canvas');
let ctx = cnvs.getContext('2d');

ctx.lineWidth = 0.5;

for (var i = step*scale; i < cnvs.width; i += step*scale) { //вертикальные
  polyline('#7a7979', [[i, 0], [i, cnvs.height]]);
}

for (var i = step*scale; i < cnvs.height; i += step*scale) { //Горизонтальные
  polyline('#7a7979', [[0, i], [cnvs.width, i]]);
}

ctx.lineWidth = 2;
let pts = [];
for(let x = -cnvs.width/2; x<cnvs.width/2; x+=5) {
    pts.push([cnvs.width/2+x, cnvs.height/2 - y(x/scale)*scale]);
}
polyline('blue', pts);

//Ось X 
polyline('red', [[0, cnvs.height / 2], [cnvs.width, cnvs.height / 2]]);

// ось Y
polyline('green', [[cnvs.width / 2, 0], [cnvs.width / 2, cnvs.height]]);

function polyline(color, pts) {
  ctx.strokeStyle = color;
  ctx.beginPath();
  pts.forEach((p, i) => i ? ctx.lineTo(...p) : ctx.moveTo(...p));
  ctx.stroke();
}
<canvas width=200 height=200></canvas>

3
  • Благодарю за пример построения функции. Попробую разобраться. Конечно пока что не очень понятно как сюда впилить масштабирование. Попробовали сюда подставлять различные коэффициенты, и пока что грусть и печаль со сходством с бумажными вариантами.
    – eClipse
    26 фев 2020 в 15:15
  • @eClipse я поправил код, там был не учтен один сдвиг 26 фев 2020 в 15:22
  • @eClipse вплёл масштаб, проверил по у=x*x, вроде сошлось 26 фев 2020 в 15:42

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.