HTML5 Canvas Line

Рисование линий

Нарисовать линию с помощью HTML5 Canvas очень просто, как нарисовать линию на бумаге, определить путь, а затем заполнить путь. См. Следующие шаги:

• Сбрасывает текущий путь с помощью метода beginPath ().
• Переместите курсор рисования в начальную точку, чтобы создать новый подпуть, используя метод moveTo (x, y).
• Теперь используйте метод lineTo (x, y), который добавляет новую точку и соединяет эту точку с начальной точкой с помощью прямой линии.
• Оба указанных выше методы принимают параметры x и y, которые указывают, где именно вы хотите нарисовать линию.
• Наконец, используйте метод stroke (), чтобы сделать линию видимой.

Графическая презентация:

Пример: нарисовать простую линию

Следующий код будет рисовать простую линию от (10,45) до ( 180,40).

Вывод:

            var canvas = document.getElementById ('DemoCanvas');//Всегда проверяйте свойства и методы, чтобы  убедитесь, что ваш код не нарушается в других браузерах. if (canvas.getContext) {var context = canvas.getContext ('2d'); //Сбрасываем текущий путь context.beginPath (); //Начальная точка (10,45) context.moveTo (10,45); //Конечная точка (180,47) context.lineTo (180,47); //Делаем линию видимой context.stroke ();  }   

Пример: рисование горизонтальных и вертикальных линий

В следующем примере кода для постепенного рисования горизонтальных и вертикальных линий на холсте используются методы moveTo и lineTo.

Вывод:

            var canvas = document.getElementById  ('DemoCanvas'); если (canvas.getContext) {var ctx = canvas.getContext ("2d");  для (я = 10; я <200; я + = 20) {ctx.moveTo (0, я);  ctx.lineTo (canvas.width, i);  ctx.stroke ();  } для (я = 10; я <400; я + = 20) {ctx.moveTo (я, 0);  ctx.lineTo (i, canvas.width/2);  ctx.stroke ();  }}    
 Ширина линии 
 
 Свойство lineWidth дает ширину (в пикселях) линий  .  Значение свойства - положительное число (значение по умолчанию 1).  При настройке следует игнорировать нулевые, отрицательные и NaN значения, оставляя значение неизменным.. В следующем примере рисуется серия линий с использованием возрастающих значений (от 1 до 12) для свойства lineWidth. 
 
  Вывод:  
  
 
            var canvas = document  .getElementById ('DemoCanvas'); если (холст.getContext) {var context = canvas.getContext ("2d");  context.beginPath ();  context.moveTo (50, 10);  context.lineTo (50, 200);  context.lineWidth = 5; //установить цвет линии context.strokeStyle = 'red';  context.stroke ();  context.beginPath ();  context.moveTo (100, 10);  context.lineTo (100, 200);  context.lineWidth = 5; //установить цвет линии context.strokeStyle = 'green';  context.stroke ();  context.beginPath ();  context.moveTo (150, 10);  context.lineTo (150, 200);  context.lineWidth = 5; //установить цвет линии context.strokeStyle = '# 2E1919';  context.stroke ();  context.stroke ();  context.beginPath ();  context.moveTo (200, 10);  context.lineTo (200, 200);  context.lineWidth = 5; //установить цвет линии context.strokeStyle = '# 3B4839';  context.stroke ();  }   
 Color Lines 
 Чтобы рисовать цветные линии, вы можете использовать свойство strokeStyle, цвет по умолчанию  черный.  Синтаксис свойства: object.strokeStyle = color.  Вот пример: 
   
           холст>  var canvas = document.getElementById ('DemoCanvas');  if (canvas.getContext) {var context = canvas.getContext ("2d"); context.beginPath (); context.moveTo (100, 10); context.lineTo (100, 200); context.lineWidth = 5;//установить строку colorcontext.strokeStyle = '# 808000'; context.stroke ();  }   
 Line Cap 
 Свойство lineCap используется для получения или установки текущего стиля окончания строки  .  Существует три стиля крышки: 

 butt: по умолчанию.  Плоский край помещается перпендикулярно каждому концу линии без добавления заглушки. 
 round: полукруг или закругленная заглушка добавляется к каждому концу линии. 
 square: к каждому концу линии добавляется квадратная заглушка. 

 Вот пример: 
  Вывод  :  
   
            var canvas = document.getElementById ('DemoCanvas'); if (canvas.getContext) {var context  = canvas.getContext ("2d");//кончик стыковой линии (первая строка) context.beginPath (); context.moveTo (20,20); context.lineTo (20,200); context.lineWidth = 25; context.strokeStyle  = '# ff0000'; context.lineCap = 'butt'; context.stroke ();//закругление границы строки (вторая строка) context.beginPath (); context.moveTo (80,20); context.lineTo (80,200)  ; context.lineWidth = 25; context.strokeStyle = '# ff0000'; context.lineCap = 'round'; context.stroke ();//конец квадратной линии (третья строка) context.beginPath (); context.moveTo (120  , 20); context.lineTo (120,200); context.lineWidth = 25; context.strokeStyle = '# ff0000'; context.lineCap = 'square'; context.stroke ();}     
 Line Join 
 Свойство lineJoin используется для получения или получения  t тип угла, который создается при соединении двух линий.  Существует три значения: 

 bevel: закрашенный треугольник соединяет две соединяемые линии, образуя скошенный угол. 
 round: линии соединяются  с закругленным углом. 
 квадрат: по умолчанию.  Линии соединяются плавным скошенным углом. 

 Вот пример: 
  Вывод:  
    
            var canvas =  document.getElementById ('DemoCanvas'); если (холст.getContext) {var ctx = canvas.getContext ("2d");  var lStart = 50;  var lEnd = 200;  var yStart = 20;  ctx.beginPath ();  ctx.lineWidth = 25;//Используем скошенный угол.  ctx.lineJoin = "скос";  ctx.moveTo (50, 20);  ctx.lineTo (150, 20);  ctx.lineTo (150, 120);  ctx.stroke ();//Используем круглый угол.  ctx.beginPath ();  ctx.lineJoin = "круглый";  ctx.moveTo (50, 140);  ctx.lineTo (150, 140);  ctx.lineTo (150, 260);  ctx.stroke ();//Используем митру.  ctx.beginPath ();  ctx.lineJoin = "митра";  ctx.moveTo (50, 280);  ctx.lineTo (150, 280);  ctx.lineTo (150, 400);  ctx.stroke ();  }     
 См. общий редактор Pen html css от w3resource (@ w3resource) наCodePen.