Синтаксис

fill()

Цвет заливки определяется свойством fillStyle. При вызове метода fill() все открытые фигуры будут закрыты автоматически, поэтому в таком случае можно не вызывать метод closePath().

Пример

Javascript

ctx.fillStyle = "blue";

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

ctx.fill();

 

 

Метод fillStroke

Рисует контур прямоугольника, определенный свойством strokeStyle.

Синтаксис

fillStroke(x,y,width,height)

Параметры

·x и y — координаты левого верхнего угла прямоугольника;

·width — ширина прямоугольника;

·height — высота прямоугольника.

Все параметры обязательны, должны быть положительными числами.

Пример

Javascript

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

ctx.strokeRect(120,100,100,50);

ctx.clearRect(100,70,50,50);

 

 

Метод fillStroke

Рисует контур прямоугольника, определенный свойством strokeStyle.

Синтаксис

fillStroke(x,y,width,height)

Параметры

·x и y — координаты левого верхнего угла прямоугольника;

·width — ширина прямоугольника;

·height — высота прямоугольника.

Все параметры обязательны, должны быть положительными числами.

Пример

Javascript

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

ctx.strokeRect(120,100,100,50);

ctx.clearRect(100,70,50,50);

 

 

Метод scale

Подготовил: Евгений Рыжков Дата публикации: 17.10.2011

Масштабирует единицы измерения холста.

Синтаксис

scale(x, y)

Параметры

x,y — коэффициенты масштаба по осям X и Y.

Коэффициенты — любые действительные числа: числа больше 1.0 — увеличиваем масштаб, меньше 1, но больше 0 — уменьшаем. Значение 1.0 — масштаб остается без изменений.

По умолчанию единица измерения холста равна одному пикселю. Если мы применим коэффициент 0.5, тогда единица измерения уменьшится вдвое и соответственно изображение так же уменьшится.

Пример

Javascript

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

 

ctx.scale(0.33,0.33); // уменьшаем в три раза

 

 

Метод save

Сохраняет (помещает в стек) состояние канвы. При этом сохраняются:

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

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

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

Синтаксис

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

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

Синтаксис

rotate(angle)

Параметры

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

Пример

Javascript

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

 

ctx.fillStyle = "red";

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

 

 

Метод restore

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

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

·значения свойств: 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);

 

 

Метод putImageData

Помещает на холст объект 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); // отображаем только зеленый квадрат

 

 

Метод moveTo

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