HTML5 Canvas Line

Содержание
  1. Рисование линий Нарисовать линию с помощью 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.
    
    
    
  2. Color Lines
  3. Line Cap
  4. Line Join

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

Нарисовать линию с помощью 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.

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