Метод setTransform

Пример

Синтаксис

Метод lineTo

Пример

Синтаксис

Метод moveTo

Пример

Параметры

Синтаксис

Метод putImageData

Пример

Синтаксис

Метод restore

Пример

Параметры

Синтаксис

Метод rotate

Пример

Синтаксис

save()

Применяется в паре с методом restore().

Javascript

ctx.fillStyle = "red";

ctx.save();

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

ctx.fillStyle = "green";

ctx.save();

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

ctx.fillStyle = "blue";

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

ctx.restore();

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

ctx.restore();

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

Поворачивает полотно на заданный угол вокруг точки начала координат.

rotate(angle)

angle — угол поворота в радианах.

Javascript

ctx.rotate(Math.PI / 4); // поворот на 45 градусов

ctx.fillStyle = "red";

ctx.fillRect(150,10,300,100);

Извлекает из стека состояние канвы. При этом извлекаются:

·примененные трансформации;

·значения свойств: strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX,shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation

·контуры отсечения.

restore()

Применяется в паре с методом save().

Javascript

ctx.fillStyle = "red";

ctx.save();

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

ctx.fillStyle = "green";

ctx.save();

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

ctx.fillStyle = "blue";

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

ctx.restore();

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

ctx.restore();

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

Помещает на холст объект imageData (содержит RGBA информацию).

putImageData(imageData, x, y [, dX, dY, dWidth, dHeight])

·imageData — объект, созданный с помощью метода createImageData() или полученный с помощьюgetImageData().

·x и y — координаты левого верхнего угла размещаемого на холсте объекта относительно холста;

·dX, dY — координаты левого верхнего угла относительно изображения в imageData, от которого будут рассчитываться размеры изображения;

·dWidth, dHeight — размеры размещаемого объекта (обрезается часть изображения, которая не вмещается в эти размеры).

Javascript

ctx.fillStyle = "red";

ctx.fillRect(10,10,100,40);

ctx.fillStyle = "green";

ctx.globalAlpha = "0.5";

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

var Pixel1 = ctx.getImageData(10,10,140,80);

ctx.putImageData(Pixel1,200,200,80,20,50,50); // отображаем только зеленый квадрат

Перемещаем текущие положение на холсте к координатам (x, y).

moveTo(x,y)

Параметры обязательны.

Javascript

ctx.moveTo(50,50);

ctx.lineTo(50,100);

ctx.lineTo(100,100);

ctx.stroke();

Рисует линию от текущего положения на холсте до точки (x, y). По этим координатам так же будет новое текущее положение на холсте.

lineTo(x,y)

Параметры обязательны.

Javascript

ctx.moveTo(50,50);

ctx.lineTo(50,100);

ctx.lineTo(100,100);

ctx.stroke();

Делает сброс матрицы преобразования к единичной матрице, а затем вызывается метод transform с параметрами указанными в setTransform.

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