Рисование параболы без разрывов

Question

Имеется код, рисующий параболу:

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

canvas.width = 800;
canvas.height = 1000;

const width = 10;
const height = 300;
ctx.beginPath();
for (let i = -40; i <= 40; i += 0.1) {
  ctx.fillStyle = 'red';
  ctx.rect(200 + i * width, height - i ** 2, 2, 2);
  ctx.fill();
}

<canvas></canvas>

Проблема в том, что на "концах" параболы заметны явные разрывы.

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

Как можно нарисовать параболу без разрывов?

Answer 1

Воспользуйтесь методом lineTo, чтобы рисовать непрерывную ломанную, а не множество маленьких прямоугольничков. С минимальными изменениями, как-то так:

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
        
canvas.width = 800;
canvas.height = 1000;

const width = 10;
const height = 300;
        
ctx.beginPath();
ctx.lineWidth = 2.0;
ctx.strokeStyle = "red";
let begin_i = -40;
ctx.moveTo(200 + begin_i * width, height - begin_i ** 2);
for (let i = begin_i + 0.1; i <= 40; i += 0.1) {
    ctx.lineTo(200 + i * width, height - i ** 2);
}
ctx.stroke();

<canvas></canvas>

БЛОГ НА HUSL

Рисование параболы без разрывов

Ответы (1 шт):