Учебник Canvas: Квадратическая кривая и демо

Canvas предлагает две мощные функции для рисования кривых - quadraticCurveTo и bezierCurveTo.

В предыдущей главе мы видели, как провести линию в Canvas. Но это для прямой линии. Для рисования кривой предлагаются два метода.

1) Квадратическая кривая, которая является притчей, поэтому возможно асимметричная дуга, имеет только точку перегиба.

Начальная точка задана через moveTo (x, y).
Центр кривой зависит от контрольной точки cpx, cpy.
Точка прибытия - x, y.

2) Кривая Безье - это сочетание дуг, она имеет не менее двух точек перегибов.

P0 - точка входа, заданная для moveTo (x, y).
P1 - контрольная точка cpx1, cpy1.
P2 подразумевается.
Р3 - контрольная точка cpx2, cpy2.
p4 - конечная точка x, y .

Легче приковать кривые, как, например, волнения на воде с функцией Безье. Ветка дерева может иметь форму притчи как квадратическая кривая или двойная кривая в зависимости от функции Безье.

Для этой демонстрации будет использоваться принцип квадратичной кривой, и она будет рисоваться с функцией quadraticCurveTo.

График зависит от трех точек: Начальной точки, контрольной точки, обозначающей внешний предел, достигаемый кривой, и конечной точки. Форма кривой зависит от соотношения этих трех точек.

Полный синтаксис для получения кривой требует трех функций:

  1. beginPath запускает новую кривую.
  2. moveTo - начальная точка контура.
  3. quadraticCurveTo имеет две пары аргументов: контрольная точка ctx, cty, где меняется направление кривой, и конечная точка x, y
    4. .

Можно указать цвет и толщину с теми же функциями, которые уже использовались для рисования прямой линии:

Показ

Canvas требует современного браузера: Chrome, Firefox, IE9, Safari .

Полный исходный код:

<canvas id="canvas1" width="400" height="150" style="border:1px solid #CCC">
</canvas>

<script>
var canvas = document.getElementById("canvas1");
if (canvas.getContext)
{
  context = canvas.getContext('2d');
}

function drawCurve()
{
  context.beginPath();
  context.strokeStyle='red';
  context.lineWidth=4;
  context.moveTo(20,100);
  context.quadraticCurveTo(200,10, 300, 100);
  context.stroke();
}

drawCurve();

</script>

Чтобы увидеть, как функция использует координаты, мы также поместили черные точки к трем координатам, используемым для рисования кривой...

function drawDot(x, y)
{
  context.beginPath();
  context.fillStyle='black';
  context.arc(x, y, 4, 0, 2 * Math.PI, true);
  context.fill();
}
drawDot(20, 100);	
drawDot(200, 10);	
drawDot(300, 100);

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

А также...