Учебник по пути HTML5 Canvas

Введение

Пути холста позволяют рисовать произвольные формы. В холсте HTML5 путь состоит из списка из нуля или более подпутей. В каждом подпутье есть одна или несколько точек, соединенных прямыми линиями или кривыми. Чтобы создать произвольную форму, выполните следующие действия:

  • Используйте метод beginPath (), чтобы начать рисование пути.
  • Нарисуйте путь, образующий форму, используя линии, кривые и другие примитивы.
  • После создания пути вызовите метод fill () для заполнения подпутей с использованием текущего стиля заливки или метода stroke () для визуализации штрихов текущего подпути с использованием текущих стилей обводки. Ваша фигура не будет видна, пока вы не вызовете методы fill () или stroke ().
  • Теперь вызовите метод closePath (), чтобы закрыть текущий подкаталог и запустить новый подкаталог с начальной точкой равняется концу закрытого подпути.

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

HTML5 Canvas Path: пример — 1

В следующем веб-документе метод beginPath () используется для рисования двух путей с использованием разных цветов. В конце он использует метод closePath () для закрытия текущего подпути.

Вывод:

      Пример примера дуг       var canvas  = document.getElementById ("myCanvas"); если (холст.getContext) {var ctx = canvas.getContext ('2d');  ctx.beginPath (); //Начинаем новый путь.  ctx.lineWidth = "3";  ctx.strokeStyle = "зеленый"; //Этот путь зеленый.  ctx.moveTo (0, 0);  ctx.lineTo (160, 160);  ctx.lineTo (200, 160);  ctx.stroke ();  ctx.beginPath ();  ctx.strokeStyle = "синий"; //Этот путь синий.  ctx.moveTo (0, 0);  ctx.lineTo (50, 170);  ctx.stroke ();  ctx.closePath (); //Закрываем текущий путь.}     

Пример пути холста HTML5 - 2: рисование треугольника

Следующий веб-документ рисует треугольник.

Вывод:


      Пример примера дуг       var canvas = document.getElementById ("DemoCanvas"); var context = canvas.getContext ("2d");//Устанавливаем свойства стиля .context.fillStyle = 'green'; context.strokeStyle = 'red'; context  .lineWidth = 2; context.beginPath ();//Начать с левого верхнего угла .context.moveTo (20, 20); //даем координаты (x, y) контексту. lineTo (190, 20); context.lineTo (20, 190); context.lineTo (20, 20);//Теперь заполняем фигуру и рисуем штрих. context.fill (); context.stroke (); context  .closePath ();    

Путь к холсту HTML5: пример - 3

Следующая диаграмма путей создана квадратичной кривой и прямой линией.

Вывод:

Код:

      Пример примера дуг       var ctx = document.getElementById ('DemoCanvas'). getContext ('2d'  ); ctx.fillStyle = "синий"; ctx.beginPath (); ctx.moveTo (30, 30); ctx.lineTo (150, 150); ctx.bezierCurveTo (60, 70, 60, 70, 70, 180)  ;  ctx.lineTo (30, 30); ctx.fill ();    

Путь к холсту HTML5: пример - 4

Следующая диаграмма путей образована прямой линией (красный цвет), квадратичной кривой (синий цвет) и кривой Безье (зеленый цвет).

Код:

      Пример дуг, пример       var canvas = document.getElementById ('DemoCanvas'); if (canvas.getContext) {var ctx  = canvas.getContext ('2d'); ctx.lineWidth = 5;  ctx.beginPath (); ctx.moveTo (100, 20);//строка 1ctx.lineTo (200, 160); ctx.strokeStyle = 'red';  ctx.stroke ();//квадратичная криваяctx.beginPath (); ctx.moveTo (200,160);  ctx.quadraticCurveTo (230, 200, 260, 100); ctx.strokeStyle = 'синий';  ctx.stroke (); //Безье curvectx.beginPath (); ctx.moveTo (260,100);  ctx.bezierCurveTo (290, -40, 300, 190, 400, 150); ctx.strokeStyle = 'зеленый';  ctx.stroke (); ctx.closePath ();  }    

См. общий редактор Pen html css от w3resource (@ w3resource) наCodePen.

Оцените статью
nanomode.ru
Добавить комментарий