Синтаксис. Доступны три значения: miter (используется по умолчанию), round, bevel

lineJoin[=value]

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

Пример

Javascript

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

 

 

Свойство lineWidth

Определяет толщину линий.

Синтаксис

lineWidth[=value]

Значение — положительное число в пикселях. Если не задавать значение, тогда будет происходить чтение свойства.

Пример

Javascript

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d");

context.moveTo(100, 150);

context.lineTo(450, 50);

context.lineWidth = 15;

context.stroke();

 

 

Свойство miterLimit

При соединении линий с опцией miter, концы линий продлеваются на определенное расстояние чтобы соединиться. Это расстояние будет небольшим для больших углов и в разы больше для острых.

Свойство miterLimit задает максимально допустимое расстояние для "дорисовки". Если для соединения линий требуется большее расстояние, тогда они будут соединены как bevel.

Синтаксис

miterLimit [=value]

Значение — число не менее 1.0 (значение меньше будет восприниматься как 1.0). По умолчанию miterLimit = 10.0. Значение 1.0 означает отсутствие удлинения.

Пример

Javascript

var canvas = document.getElementById("myCanvas");

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

 

ctx.miterLimin = 5.2;

ctx.moveTo(20,10);

ctx.lineTo(30,30);

ctx.lineTo(40,40);

ctx.stroke();

 

 

Свойство strokeStyle

Определяет цвет линий.

Синтаксис

strokeStyle[=value]

Значение — имя цвета, или шестнадцатиричный код, или rgb/rgba. Если не задавать значение, тогда будет происходить чтение свойства.

Пример

Javascript

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d");

context.moveTo(100, 150);

context.lineTo(450, 50);

context.strokeStyle = "#ff0000";

context.stroke();

 

 

Свойство textAlign

Определяет выравнивание текста.

Синтаксис

textAlign[=value]

Значение — один из следующих вариантов:

·start (по умолчанию) — по правому краю;

·end — по правому краю.

·left — по левому краю;

·right — по правому краю;

· center — по центру;

Выравнивание происходит относительно указанных координат начала текста.

Значение start / left и right/ end совпадут когда к у нас направление текста ltr. И наоборот, start / right и left / end совпадут для rtl.

Пример

Javascript

var canvas = document.getElementById("myCanvas");

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

 

ctx.font = "italic bold 16px Arial";

ctx.textBaseline = "Top";

ctx.fillStyle = "blue";

ctx.fillText("Учим canvas", 40, 100);

 

ctx.font = "normal normal 32px Tahoma";

ctx.textAlign = "center";

ctx.strokeText("canvas оживит сайты", 300, 200);