Рисование кривых на холсте может быть простым или сложным, все зависит от того, чего вы хотите добиться, каких-то интересных эффектов можно добиться, что мы могли бы использовать для создания некоторых функций на нашей странице, которые отличаются от остальных страниц, созданных в HTML5 .
Одна из вещей, которые мы можем сделать, - это предоставить расширенные возможности управления созданием изогнутых линий, с помощью этого типа инструментов мы будем ближе к тому, чтобы не иметь ограничений при рассмотрении того, что может сделать наша страница.
Нарисуйте кривую при перемещении мыши
Этот случай довольно интересен, так как мы делаем рисование кривой при перемещении мыши, кроме того, если мы нажимаем любую клавишу на клавиатуре, некоторые точки кривой меняются.
Например, если мы нажмем клавишу ctrl, первая точка, представляющая конец подпути, будет перемещена, если мы нажмем клавишу Shift, вторая точка, которая является первыми двумя аргументами метода arcTo (), будет перемещена и, наконец, если это не произойдет нажатие любой клавиши переместит третью точку, представленную двумя последними аргументами метода.
Давайте посмотрим ниже код, с помощью которого мы достигаем этих эффектов:
Пример canvas {border: thin solid black} body> * {float: left;} Ваш браузер не совместим с canvas var element canvasElem = document.getElementById ("canvas"); var ctx = canvasElem.getContext ("2d"); var point1 = [100, 10]; var point2 = [200, 10]; var point3 = [200, 110]; Draw (); canvasElem.onmousemove = function (e) {if (e.ctrlKey) {point1 = [e.clientX, e.clientY]; } else if (e.shiftKey) {point2 = [e.clientX, e.clientY]; } else {point3 = [e.clientX, e.clientY]; } ctx.clearRect (0, 0, 540, 140); Draw (); } function draw () {ctx.fillStyle = "yellow"; ctx.strokeStyle = "black"; ctx.lineWidth = 4; ctx.beginPath (); ctx.moveTo (точка1 [0], точка1 [1]); ctx.arcTo (точка2 [0], точка2 [1], точка3 [0], точка3 [1], 50); ctx.stroke (); DrawPoint (точка1 [0], точка1 [1]); DrawPoint (точка2 [0], точка2 [1]); DrawPoint (точка 3 [0], точка 3 [1]); ctx.beginPath (); ctx.moveTo (точка1 [0], точка1 [1]); ctx.lineTo (point2 [0], point2 [1]); ctx.lineTo (точка 3 [0], точка 3 [1]); ctx.stroke (); } функция drawPoint (x, y) {ctx.lineWidth = 1; ctx.strokeStyle = "red"; ctx.strokeRect (x -2, y-2, 4, 4); } Как мы видим, сначала в коде мы определяем обработчик приема событий нажатых клавиш, в нем мы устанавливаем значения, которые должны быть приняты.
Давайте посмотрим на скриншот ниже, как это может получиться в нашем браузере, важно отметить, что при динамическом воспроизведении этого примера результаты могут отличаться:
Использование метода Arc
Ранее мы использовали только метод arcTo (), теперь мы увидим, как работает метод arc (), его обработка проще, так как мы указываем точку на холсте через первые два аргумента, а затем радиус и угол кривая.
Давайте посмотрим на следующий пример того, как нарисовать три типа кривых с помощью этого метода:
Пример canvas {border: thin solid black} body> * {float: left;} Ваш браузер не совместим с canvas var ctx = document.getElementById ("canvas"). GetContext ("2d"); ctx.fillStyle = "желтый"; ctx.lineWidth = "3"; ctx.beginPath (); ctx.arc (70, 70, 60, 0, Math.PI * 2, true); ctx.stroke (); ctx.beginPath (); ctx.arc (200, 70, 60, Math.PI / 2, Math.PI, true); ctx.fill (); ctx.stroke (); ctx.beginPath (); var val = 0; for (var i = 0; i <4; i ++) {ctx.arc (350, 70, 60, val, val + Math.PI / 4, false); val + = Math.PI / 2; } ctx.closePath (); ctx.fill (); ctx.stroke (); Посмотрим теперь, как это выглядит в нашем браузере:
Как мы видим, первый и второй примеры представляют собой круги, одна из которых завершена, а другая - с небольшим отверстием, однако третий круг является совершенно нерегулярным и показывает нам универсальность метода arc ().
- 0
СТАТЬИ