Метод save

Пример

Параметры

Синтаксис

Метод scale

Пример

Параметры

Синтаксис

Метод fillStroke

Пример

Параметры

Синтаксис

Метод fillStroke

Пример

Синтаксис

Метод fill

Пример

Параметры

Обрезание

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

·image — объект Image() или элемент canvas;

·sx, sy — координаты верхнего левого угла слайса относительно изображения;

·sWidth, sHeight — размеры слайса;

·dx,dy — координаты верхнего левого угла обрезанного изображения;

·dWidth, dHeight — размеры обрезанного изображения на холсте.

вырезаем слайс из текущего изображения

результирующую картинку позиционируем и масштабируем на холсте

Javascript

	var canvas = document.getElementById("picture");
	var ctx = canvas.getContext('2d');
	var img = new Image();
	img.src = "path-to/ff.png";
	img.onload = function(){
	ctx.drawImage(img, 300, 100);
	ctx.drawImage(img, 20, 39, 170, 140, 13, 15, 171, 142);
	}

Делает заливку фигуры.

fill()

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

Javascript

ctx.fillStyle = "blue";

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

ctx.fill();

Рисует контур прямоугольника, определенный свойством 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);

Рисует контур прямоугольника, определенный свойством 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);

Подготовил: Евгений Рыжков Дата публикации: 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); // уменьшаем в три раза

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

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

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

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

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