Кривые Безье - это тип кривых, широко используемых в чертежных и графических программах, поскольку они позволяют нам создавать кривые с некоторыми точками на плоскости, благодаря чему с помощью некоторых математических формул мы можем получить гладкие или более точные кривые, что мы можем Используйте, чтобы дать более подробную информацию о нашей графике.
В HTML5 у нас есть возможность реализовать кривые Безье благодаря нескольким методам, мы можем включить квадратные и кубические кривые, ограничение состоит в том, что на холсте у нас нет визуальной поддержки того, где у нас есть контрольные точки.
Методы генерации кривых
Как мы уже объясняли, кривые Безье полагаются на некоторые точки, чтобы иметь возможность сделать чертеж, чтобы получить желаемую кривую, мы должны провести много экспериментов, однако, чтобы иметь возможность экспериментировать, мы должны сначала знать фон, поэтому ниже мы увидим Соответствующая информация с методами, которые позволяют нам нарисовать эти кривые:
bezierCurveTo (cx1, cy1, cx2, cy2, x, y): нарисуйте кривую Безье кубического типа, где точки (x, y) объединяются с использованием контрольных точек (cx1, cy1) и (cx2, cy2).
quadraticCurveTo (cx, xy, x, y): нарисуйте квадратичную кривую Безье для точек (x, y) с контрольной точкой (cx, cy).
Мы уже знаем технический аспект, с которым мы должны работать, теперь мы увидим пример в коде.
В этом примере мы собираемся нарисовать кубическую кривую Безье, где мы возьмем последний подпуть в качестве отправной точки, а затем перенесем его в точки двух последних аргументов, которые получает метод, дополнительно он включает в себя функциональность, которая, если мы нажимаем клавишу Shift или Ctrl нашей клавиатуры изменить начальную и конечную точки кривой.
Пример canvas {border: thin solid black} body> * {float: left;} Ваш браузер не совместим с canvas var element canvasElem = document.getElementById ("canvas"); var ctx = canvasElem.getContext ("2d"); var startPoint = [50, 100]; var endPoint = [400, 100]; var cp1 = [250, 50]; var cp2 = [350, 50]; canvasElem.onmousemove = function (e) {if (e.shiftKey) {cp1 = [e.clientX, e.clientY]; } else if (e.ctrlKey) {cp2 = [e.clientX, e.clientY]; } ctx.clearRect (0, 0, 500, 140); Draw (); } draw (); function draw () {ctx.lineWidth = 3; ctx.strokeStyle = "black"; ctx.beginPath (); ctx.moveTo (startPoint [0], startPoint [1]); ctx.bezierCurveTo (cp1 [0], cp1 [1], cp2 [0], cp2 [1], конечная точка [0], конечная точка [1]); ctx.stroke (); ctx.lineWidth = 1; ctx.strokeStyle = "red"; var points = [startPoint, endPoint, cp1, cp2]; for (var i = 0; i <points.length; i ++) {drawPoint (points [i]); } drawLine (startPoint, cp1); drawLine (конечная точка, cp2); } function drawPoint (point) {ctx.beginPath (); ctx.strokeRect (точка [0] -2, точка [1] -2, 4, 4); } function drawLine (from, to) {ctx.beginPath (); ctx.moveTo (из [0], из [1]); ctx.lineTo (до [0], до [1]); ctx.stroke (); } Получив код, давайте посмотрим, что он генерирует в браузере, и отметим, что, поскольку он содержит динамический раздел, результаты могут отличаться:
Если вы посмотрите, у нас есть четыре контрольные точки, отмеченные красными линиями, которые мы видим на скриншоте.
На этом мы завершаем этот урок по кривым Безье, ключом является эксперимент, если мы хотим добиться более сложных эффектов и привязываться к тому, что нам нужно.
- 0
СТАТЬИ