Разрезание изображений

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

image - определяет идентификатор изображения

sx, sy - определяют положения верхнего левого угла вырезанного изображения относительно исходного положения

sWidth, sHeight - определяют высоту и ширину вырезанного изображения

dx, dy - определяют положение изображения на холсте

dWidth, dHeight - масштаб изображения.

Применение стилей и цветов

Основных свойства:

fillStyle = цвет - установка цвета заливки

strokeStyle = цвет - используется установка цвета обводки фигуры
	ctx.fillStyle = "orange";
	ctx.fillStyle = "#FFA500";
	ctx.fillStyle = "rgb(255,165,0)";
	ctx.fillStyle="rgba(255,165,0,1)";

Прозрачность

Возможные варианты установка прозрачности: globalAlpha = значение прозрачности

Это свойство применяет значение прозрачности ко всем фигурам, рисуемым на canvas.

Допустимое значение от 0.0 (полностью прозрачный)

до 1.0 (непрозрачный) - по умолчанию ctx.strokeStyle = "rgba(255,0,0,0.5)"; ctx.fillStyle = "rgba(255,0,0,0.5)"; Градиент

createLinearGradient(x1,y1,x2,y2) - создание линейного градиента

x1 и y1 - координаты начальной точки градиента

x2 и y2 - координаты конечной точки градиента

addColorStop(точка,цвет) цвета перехода

Создание теней

shadowOffsetX ─ смещение тени от объекта по горизонтали (может принимать отрицательные значения).

shadowOffsetY ─ смещение тени от объекта по вертикали (может принимать отрицательные значения).

shadowBlur ─ величина размытия тени

shadowColor ─ цвет тени (по умолчанию черный).

Анимация

Основные шаги анимации 1. Отчистить холст.

Самый простой способ сделать это состоит в методе clearRect. 2. Сохранить состояние холста.

Если менялись параметры, которые влияют на состояние холста

3.Нарисовать фигуры.

4.Восстановить состояние холста.

Рисование текста Атрибуты font – установка шрифтовых параметров

font - определение шрифт текста, таким же образом как свойство CSS font-

family

textAlign - выравнивание текста

start - по умолчанию

end

left

right

center

textBaseline - вертикальное выравнивание текста

top

hanging

middle

alphabetic - по умолчанию

ideographic

bottom

Методы

fillText(text, x, y) - strokeText(text, x, y) -

Тени

shadowColor - цвет тени. Допустимые значения такие же как и

значения цвета в CSS.

shadowBlur - величина размытости на тени в пикселях. Чем меньше

значение размытости, тем более резкой будет тень

shadowOffsetX и shadowOffsetY - смещение тени по x и y в пикселях.