lineJoin

Автор: Евгений Рыжков Дата публикации: 12.10.2011
Последнее обновление: 01.01.1970

Определяет оформление соединений линий.

Синтаксис

lineJoin[=value]

Доступны три значения: miter (используется по умолчанию), round, bevel. Если не задавать значение, тогда будет происходить чтение свойства.

lineJoin

Пример

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
	
 // miter 
    context.beginPath();
    context.moveTo(canvas.width / 2 - 50 - 140, canvas.height - 50);
    context.lineTo(canvas.width / 2 - 140, 50); 
    context.lineTo(canvas.width / 2 + 50 - 140, canvas.height - 50);
    context.lineWidth = 25;
    context.lineJoin = "miter";
    context.stroke();
 
    // round 
    context.beginPath();
    context.moveTo(canvas.width / 2 - 50, canvas.height - 50);
    context.lineTo(canvas.width / 2, 50);
    context.lineTo(canvas.width / 2 + 50, canvas.height - 50);
    context.lineWidth = 25;
    context.lineJoin = "round";
    context.stroke();
 
    // bevel
    context.beginPath();
    context.moveTo(canvas.width / 2 - 50 + 140, canvas.height - 50);
    context.lineTo(canvas.width / 2 + 140, 50);
    context.lineTo(canvas.width / 2 + 50 + 140, canvas.height - 50);
    context.lineWidth = 25;
    context.lineJoin = "bevel";
    context.stroke();

В живую.