Синтаксис
lineCap[=value]
Доступны три значения: butt (используется по умолчанию), round, square. Если не задавать значение, тогда будет происходить чтение свойства.
При использовании значений round или squre, фактическая длина линии увеличивается на значение lineWidth (с двух сторон лини добавляются отрезки длинной lineWidth/2).
Пример
Javascript
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
// butt line cap (верхняя линия)
context.beginPath();
context.moveTo(200, canvas.height / 2 - 50);
context.lineTo(canvas.width - 200, canvas.height / 2 - 50);
context.lineWidth = 20;
context.strokeStyle = "#0000ff";
context.lineCap = "butt"
context.stroke();
// round line cap (средняя линия)
context.beginPath();
context.moveTo(200, canvas.height / 2);
context.lineTo(canvas.width - 200, canvas.height / 2);
context.lineWidth = 20;
context.strokeStyle = "#0000ff";
context.lineCap = "round";
context.stroke();
Свойство lineJoin
Определяет оформление соединений линий.
Синтаксис
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);