Заметка

Синтаксис

Свойство globalCompositeOperation

Пример

Синтаксис

Свойство fillStyle

Пример

Синтаксис

Свойство font

Пример

Javascript

ctx.fillStyle = "red";

ctx.fillRect(50,50,30,20);

ctx.translate(100,100);

ctx.fillStyle = "blue";

ctx.fillRect(50,50,30,20);

Определяет свойства шрифта.

font[=value]

Значение — перечень свойств шрифта аналогично синтаксису в CSS.

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

Определяет цвет заливки.

fillStyle[=value]

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

Javascript

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

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

ctx.fillStyle = "#ff0000";

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

Определяет как буду себя вести перекрывающиеся фигуры.

globalCompositeOperation = type

type — одно из зарезервированных значений:

В качестве иллюстрации используется пример с двумя фигурами, где синий квадрат рисуется первым.

· source-over (используется по умолчанию) — новое изображение рисуется по верх старого

· destination-over — новые фигуры рисуются под уже нарисованными

· source-in — отображается только та часть изображения, где фигуры пересекаются. Сверху новое изображение

· destination-in — отображается только та часть изображения, где фигуры пересекаются. Сверху старое изображение

· source-out — отображается только та часть нового изображения, которая не пересекается с другими фигурами

· destination-out — отображается только та часть предшествующего изображения, которая не пересекается с другими фигурами

· source-atop — у нового изображения отображается только та часть, которая пересекается с предшествующими фигурами

· destination-atop — у предшествующего изображения отображается (поверх) только та часть, которая пересекается с новой фигурой.

· lighter — место пересечения фигур изменяет цвет на тот, которые получается путем сложения цветов пересекающихся фигур.

· darker — место пересечения фигур изменяет цвет на тот, которые получается путем вычитания цветов пересекающихся фигур.

· xor — место пересечения фигур прозрачно.

· copy — отображается только новая фигура, все остальное удаляется.

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