MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

CanvasRenderingContext2D.lineCap

Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

Свойство CanvasRenderingContext2D.lineCap предоставляемое Canvas 2D API определяет, как будут выглядеть концы нарисованных линий. Свойство может принимать 3 значения: butt, round и square. По умолчанию установленно butt.

См. также главу Applying styles and color в Canvas Tutorial.

Синтаксис

ctx.lineCap = "butt";
ctx.lineCap = "round";
ctx.lineCap = "square";

Значения

butt
Концы линий прямые.
round
Концы линий скругленные.
square
Концы линий прямые, но к ней с обоих концов добавляется поле с шириной равной толщине линии и высотой равной половине от толщины линии.

Примеры

Использование свойства lineCap

Ниже представлен простой фрагмент кода, использующий lineCap.

HTML

<canvas id="canvas"></canvas>

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineWidth = 15;
ctx.lineCap = "round";
ctx.lineTo(100, 100);
ctx.stroke();

Вы можете редактировать код, представленный ниже, и сделанные вами изменения отобразятся на холсте в режиме реального времени:

Разница между значениями lineCap

В примере будут нарисованы три линии с разными значениями lineCap. Для наглядности мы добавим две направляющие. Каждая линия будет начинаться и заканчиваться этими направляющими.

Левая линия будет использовать значение lineCap butt. Она не будет выходить за направляющие. Средняя линия будет нарисована со занчением lineCap round. За направляющие будут выходить полукруги с диаметром равным толщине линии. Правая линия будет использовать значение square. Она будет выходить за направляющие на поля с шириной равной толщине линии и высотой равной половине толщины.

var ctx = document.getElementById('canvas').getContext('2d');
var lineCap = ['butt','round','square'];

// Draw guides
ctx.strokeStyle = '#09f';
ctx.beginPath();
ctx.moveTo(10,10);
ctx.lineTo(140,10);
ctx.moveTo(10,140);
ctx.lineTo(140,140);
ctx.stroke();

// Draw lines
ctx.strokeStyle = 'black';
for (var i = 0; i < lineCap.length; i++) {
  ctx.lineWidth = 15;
  ctx.lineCap = lineCap[i];
  ctx.beginPath();
  ctx.moveTo(25+i*50,10);
  ctx.lineTo(25+i*50,140);
  ctx.stroke();
}

ScreenshotLive sample

Спецификации

Спецификация Статус Комментарий
WHATWG HTML Living Standard
Определение 'CanvasRenderingContext2D.lineCap' в этой спецификации.
Живой стандарт  

Совместиммоссть с браузерами

Возможность Chrome Firefox (Gecko) Internet Explorer Opera Safari
Базовая поддержка (Да) (Да) (Да) (Да) (Да)
Возможность Android Chrome для Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Базовая поддержка (Да) (Да) (Да) (Да) (Да) (Да)
  • В браузерах на базе Webkit и Blink помимо этого свойства, также поддержвается нестадартный метод ctx.setLineCap().

Смотрите также

Метки документа и участники

 Внесли вклад в эту страницу: Thud97
 Обновлялась последний раз: Thud97,