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();

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

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineWidth = 15;
ctx.lineCap = "round";
ctx.lineTo(100, 100);
ctx.stroke();</textarea>

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", function() {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", function() {
  textarea.focus();
})

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);

Разница между значениями 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();
}

<canvas id="canvas" width="150" height="150"></canvas>

Screenshot	Live sample

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

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

Особенности WebKit/Blink

• В браузерах на базе Webkit и Blink помимо этого свойства, также поддержвается нестадартный метод ctx.setLineCap().

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

• Интерфейс, предоставляющий данное свойство CanvasRenderingContext2D
• CanvasRenderingContext2D.lineWidth
• CanvasRenderingContext2D.lineJoin