Синтаксис. Свойство globalAlpha

Пример

Синтаксис

Свойство lineJoin

Пример

Синтаксис

Пример

Синтаксис

Свойство globalAlpha

Пример

Javascript

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

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

ctx.globalCompositeOperation="destination-over";

Определяет уровень прозрачности.

globalAlpha [=value]

Значение — число в диапазоне от 0 до 1.0 (0 — абсолютно прозрачно, 1 - абсолютно не прозрачно). По умолчанию значение равно 1. Если не задавать значение, тогда будет происходить чтение свойства.

Javascript

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

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

ctx.beginPath();

ctx.fillStyle = "#ff0000";

ctx.fillRect(50,50,100,50);

ctx.beginPath();

ctx.globalAlpha = 0.5;

ctx.fillStyle = "blue";

ctx.arc(100,120,50,0,2*Math.PI,false);

ctx.fill();

Свойство lineCap

Определяет оформление концов линий.

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[=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]

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

Дата добавления: 2015-06-27