Синтаксис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).
|
