Метод fillRect
Заливает прямоугольную область цветом, определенный свойством fillStyle.
Синтаксис
fillRect(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);
shadowBlur
Задает размер размытия тени.
Синтаксис
shadowBlur [= value]
Значение по умолчанию равно 0.
Пример
Javascript
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.shadowOffsetX = 4;
ctx.shadowOffsetY = 4;
ctx.shadowBlur = 4;
ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
ctx.fillStyle = "red";
ctx.fillRect(50,50,200,100);
shadowColor
Задает цвет тени.
Синтаксис
shadowColor [= value]
Значением может быть имя цвета, шестнадцатеричный код, rba/rgba представление.
Пример
Javascript
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.shadowOffsetX = 4;
ctx.shadowOffsetY = 4;
ctx.shadowBlur = 4;
ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
ctx.fillStyle = "red";
ctx.fillRect(50,50,200,100);
shadowOffsetX
Подготовил: Евгений Рыжков Дата публикации: 14.10.2011
Задает смещение тени относительно объекта по оси X в пикселах.
Синтаксис
shadowOffsetX [= value]
По умолчанию смещение равно 0. Положительные значения смещают тень вправо, отрицательные — влево.
Пример
Javascript
1 |
var canvas = document.getElementById("myCanvas"); |
|||||||
2 |
var ctx = canvas.getContext("2d"); |
|
||||||
3 |
|
|
||||||
4 |
ctx.shadowOffsetX = 4; |
|
||||||
5 |
ctx.shadowOffsetY = 4; |
|
||||||
6 |
ctx.shadowBlur = 4; |
|
||||||
7 |
ctx.shadowColor = "rgba(0, 0, 0, 0.5)"; |
|
||||||
8 |
ctx.fillStyle = "red"; |
|
||||||
9 |
ctx.fillRect(50,50,200,100); |
|
||||||
shadowOffsetY
Задает смещение тени относительно объекта по оси Y в пикселах.
Синтаксис
shadowOffsetY [= value]
По умолчанию смещение равно 0. Положительные значения смещают тень вниз, отрицательные — вверх.
Пример
Javascript
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.shadowOffsetX = 4;
ctx.shadowOffsetY = 4;
ctx.shadowBlur = 4;
ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
ctx.fillStyle = "red";
ctx.fillRect(50,50,200,100);
Метод addColorStop
Добавляет стоп цвет объекту градиента, созданному методом createLinearGradient или createRadialGradient.
Синтаксис
addColorStop(position, color)
Параметры
position — положение цвета в градиенте. Значение должно быть в диапазоне 0.0 (начало) до 1.0 (конец);
color — имя или код цвета, или его rgb/rgba представление.
Объекту градиента можно задать сколько угодно стоп цветов.
Пример
Javascript
var canvas = document.getElementById("picture");
var ctx = canvas.getContext("2d");
var lineargradient = ctx.createLinearGradient(150,0,150,150);
lineargradient.addColorStop(0,"red");
lineargradient.addColorStop(1,"white");
ctx.fillStyle = lineargradient;
ctx.fillRect(0,0,150,150);
var lineargradient2 = ctx.createLinearGradient(50,50,150,250);
lineargradient2.addColorStop(0,"green");
lineargradient2.addColorStop(0.5,"blue");
lineargradient2.addColorStop(1,"yellow");
ctx.strokeStyle = lineargradient2;
ctx.moveTo(50,50);
ctx.lineTo(150,250);
ctx.stroke();
Метод arc
Рисует дугу.
Синтаксис
arc(centerX, centerY, radius, startingAngle, endingAngle, antiClockwise)
Параметры
centerX, centerY — координаты центра дуги;
radius — величина радиуса;
startingAngle, endingAngle — начало и окончание дуги. Значения задаются в радианах;
antiClockwise — направление соединения точек начал и конца дуги: по часовой стрелки или против. По умолчанию значение равно false — рисуем по часовой стрелке. Значение true — против часовой.
Дуга отобразится после вызова метода stroke(). Цвет дуги определяет свойство strokeStyle, толщину линии — lineWidth.
Пример
Javascript
var centerX = 288,
centerY = 160,
radius = 75,
startingAngle = 1.1 * Math.PI,
endingAngle = 1.9 * Math.PI,
counterclockwise = false;
context.arc(centerX, centerY, radius, startingAngle, endingAngle, counterclockwise);
context.lineWidth = 15;
context.strokeStyle = "black";
context.stroke();
Метод beginPath
Объявляем, что начинаем новый контур. Необходим когда хотим задать разные стили объектам на холсте.
Синтаксис
beginPath()
Пример
Javascript
/* черная линия */
ctx.beginPath();
ctx.moveTo(50,50);
ctx.lineTo(50,100);
ctx.lineTo(100,100);
ctx.lineWidth = 1;
ctx.strokeStyle = "black";
ctx.stroke();
/* красный треугольник */
ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(100,200);
ctx.lineTo(200,200);
ctx.closePath();
ctx.lineWidth = 5;
ctx.strokeStyle = "red";
ctx.stroke();
Метод bezierCurveTo
Рисует кривую Безье от текущей точки на холсте до указанной через промежуточные (контрольные) точки.
Подробнее о кривых Безье.
Синтаксис
bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);
Параметры
controlX, controlY, controlX2, controlY2... — координаты контрольных точек, может быть сколько угодно;
endX, endY — координаты окончания кривой.
Кривая отобразится после вызова метода stroke(). Цвет дуги определяет свойство strokeStyle, толщину линии — lineWidth. Текущее положение на холсте переместится в конец кривой.
Пример
Javascript
ctx.moveTo(75,40);
ctx.bezierCurveTo(75,37,70,25,50,25);
ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
ctx.bezierCurveTo(20,80,40,102,75,120);
ctx.bezierCurveTo(110,102,130,80,130,62.5);
ctx.bezierCurveTo(130,62.5,130,25,100,25);
ctx.bezierCurveTo(85,25,75,37,75,40);
ctx.stroke();
Метод clearRect
Очищает указанную область.
Синтаксис
clearRect(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);
Метод closePath
Замыкаем контур: последняя точка контура соединяется с первой. Текущее положение на холсте перемещается туда же. Начало контура определяется beginPath().
Синтаксис
closePath()
Пример
Javascript
/* черная линия */
ctx.beginPath();
ctx.moveTo(50,50);
ctx.lineTo(50,100);
ctx.lineTo(100,100);
ctx.lineWidth = 1;
ctx.strokeStyle = "black";
ctx.stroke();
/* красный треугольник */
ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(100,200);
ctx.lineTo(200,200);
ctx.closePath();
ctx.lineWidth = 5;
ctx.strokeStyle = "red";
ctx.stroke();
Метод createPattern
позволяет размножать изображение.
Синтаксис
createPattern(image,type)
Параметры
image — объект Image();
type — строка соответствующая одному из значений: repeat, repeat-x, repeat-y и no-repeat.
Результат появится на холсте после применения метода fill() или stroke().
Перед применением метода следует убедиться, что изображение загружено.
Пример
Javascript
var canvas = document.getElementById("picture");
var ctx = canvas.getContext("2d");
var img = new Image();
img.src = "path-to/mobil.png";
img.onload = function(){
var ptrn = ctx.createPattern(img,"repeat");
ctx.fillStyle = ptrn;
ctx.fillRect(0,0,350,150);
}
Метод createRadialGradient
Создает объект радиального градиента.
Синтаксис
createRadialGradient(x1,y1,r1,x2,y2,r2)
Параметры
x1,y1,r1 — координаты центра и радиус первой окружности;
x2,y2,r2 — координаты центра и радиус второй окружности.
После создания объекта градиента, можно ему присвоить цвета с помощью метода addColorStop. Градиент появится на холсте после применения метода fill() или stroke().
Пример
Javascript
var canvas = document.getElementById("picture");
var ctx = canvas.getContext("2d");
var radgrad = ctx.createRadialGradient(105,105,20,112,120,50);
radgrad.addColorStop(0, "#FF5F98");
radgrad.addColorStop(0.75, "#FF0188");
radgrad.addColorStop(1, "rgba(255,1,136,0)");
ctx.fillStyle = radgrad;
ctx.fillRect(0,0,250,250);
Метод drawImage
Подготовил: Евгений Рыжков Дата публикации: 14.10.2011
Выводит изображение на хосте. Имеет несколько вариантов синтаксиса с разными назначениями.
Базовый
Просто отображаем загруженную картинку.
drawImage(image, x, y)
Параметры
image — объект Image();
x,y — координаты верхнего левого угла изображения.
Масштабирование
drawImage(image, x, y, width, height)
Параметры
image — объект Image();
x,y — координаты верхнего левого угла изображения;
width, height — размеры изображения на холсте.
Изображение будет отмасштабированно согласно указанных размеров. При увеличении масштаба относительно реального изображения, картинка может становиться размытой или зернистой.
Обрезание
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
Параметры
image — объект Image() или элемент canvas;
sx, sy — координаты верхнего левого угла слайса относительно изображения;
sWidth, sHeight — размеры слайса;
dx,dy — координаты верхнего левого угла обрезанного изображения;
dWidth, dHeight — размеры обрезанного изображения на холсте.
вырезаем слайс из текущего изображения
результирующую картинку позиционируем и масштабируем на холсте
Пример
Javascript
1 |
var canvas = document.getElementById("picture"); |
|
|||||||
2 |
var ctx = canvas.getContext('2d'); |
|
|||||||
3 |
|
|
|||||||
4 |
var img = new Image(); |
|
|||||||
5 |
img.src = "path-to/ff.png"; |
|
|||||||
6 |
img.onload = function(){ |
|
|||||||
7 |
ctx.drawImage(img, 300, 100); |
|
|||||||
8 |
ctx.drawImage(img, 20, 39, 170, 140, 13, 15, 171, 142); |
||||||||
9 |
} |
|
|||||||
Метод fill
Делает заливку фигуры.
Синтаксис
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).
Синтаксис
moveTo(x,y)
Параметры обязательны.
Пример
Javascript
ctx.moveTo(50,50);
ctx.lineTo(50,100);
ctx.lineTo(100,100);
ctx.stroke();
Метод lineTo
Рисует линию от текущего положения на холсте до точки (x, y). По этим координатам так же будет новое текущее положение на холсте.
Синтаксис
lineTo(x,y)
Параметры обязательны.
Пример
Javascript
ctx.moveTo(50,50);
ctx.lineTo(50,100);
ctx.lineTo(100,100);
ctx.stroke();
Метод setTransform
Делает сброс матрицы преобразования к единичной матрице, а затем вызывается метод transform с параметрами указанными в setTransform.
Синтаксис
setTransform(a,b,c,d,e,f)
Пример
Javascript
var rectWidth = 150;
var rectHeight = 75;
// перемещаем контекст к центру холста
ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.fillStyle = "blue";
ctx.fillRect(-rectWidth / 2, -rectHeight / 2, rectWidth, rectHeight);
// сбрасываем матрицу трансформаций
// 1 0 0
// 0 1 0
// 0 0 1
// применяем новую трансформацию
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.fillStyle = "red";
ctx.fillRect(0, 0, rectWidth, rectHeight);
Метод stroke
Делает нарисованные контуры видимыми.
Синтаксис
stroke()
Пример
Javascript
ctx.moveTo(50,50);
ctx.lineTo(50,100);
ctx.lineTo(100,100);
ctx.stroke();
Метод strokeRect
Рисует контур прямоугольника цветом, определенный свойством strokeStyle.
Синтаксис
strokeRect(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);
Метод strokeText
Рисуем контур текста цветом, определенным strokeStyle.
Синтаксис
strokeText(text, x, y [, maxWidth ] )
Параметры
text — текст, который будем рисовать;
x,y — координаты верхнего левого угла текста;
maxWidth — не обязательный параметр, если он указан и текст при необходимости будет отмасштабирован чтобы влезть в указанную ширину.
Пример
Javascript
var canvas = document.getElementById("picture");
var ctx = canvas.getContext("2d");
ctx.font = "normal normal 32px Tahoma";
ctx.strokeStyle = "red";
ctx.strokoText("Учим canvas", 300, 200);
Метод toDataURL
Сохраняет в data url изображение нарисованное на холсте.
Синтаксис
canvas.toDataURL()
Результатом будет url PNG изображения закодированного в data url.
Пример
Javascript
var canvas = document.getElementById("picture");
var ctx = canvas.getContext("2d");
ctx.fillRect(10,10,20,20);
ctx.fillStyle = "green";
ctx.fillRect(40,40,20,20);
var scrImg = canvas.toDataURL();
alert(scrImg);
Метод transform
Применяет нестандартную матрицу преобразования.
Синтаксис
transform(a,b,c,d,e,f)
Параметры
Пример
Javascript
var sin = Math.sin(Math.PI/6);
var cos = Math.cos(Math.PI/6);
ctx.translate(200, 200);
var c = 0;
for (var i=0; i <= 12; i++) {
c = Math.floor(255 / 12 * i);
ctx.fillStyle = "rgb(" + c + "," + c + "," + c + ")";
ctx.fillRect(0, 0, 100, 10);
ctx.transform(cos, sin, -sin, cos, 0, 0);
}
ctx.setTransform(-1, 0, 0, 1, 200, 200);
ctx.fillStyle = "rgba(255, 128, 255, 0.5)";
ctx.fillRect(0, 50, 100, 100);
Метод translate
Перемещает канву и начало координат в новое место.
Синтаксис
translate(x, y)
Параметры
x — расстояние, на которое переносим полотно по оси X;
y — расстояние, на которое переносим полотно по оси Y.
Пример
Javascript
ctx.fillStyle = "red";
ctx.fillRect(50,50,30,20);
ctx.translate(100,100);
ctx.fillStyle = "blue";
ctx.fillRect(50,50,30,20);
Свойство font
Определяет свойства шрифта.
Синтаксис
font[=value]
Значение — перечень свойств шрифта аналогично синтаксису в CSS.
Пример
Javascript
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "italic bold 16px Arial";
ctx.textBaseline = "Top";
ctx.fillStyle = "blue";
ctx.fillText("Учим canvas", 40, 100);
ctx.font = "normal normal 32px Tahoma";
ctx.textAlign = "center";
ctx.strokeText("canvas оживит сайты", 300, 200);
Свойство fillStyle
Определяет цвет заливки.
Синтаксис
fillStyle[=value]
Значение — имя цвета, или шестнадцатиричный код, или rgb/rgba. Если не задавать значение, тогда будет происходить чтение свойства.
Пример
Javascript
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#ff0000";
ctx.fillRect(50,50,100,50);
Свойство globalCompositeOperation
Определяет как буду себя вести перекрывающиеся фигуры.
Синтаксис
globalCompositeOperation = type
type — одно из зарезервированных значений:
Заметка
В качестве иллюстрации используется пример с двумя фигурами, где синий квадрат рисуется первым.
source-over (используется по умолчанию) — новое изображение рисуется по верх старого
destination-over — новые фигуры рисуются под уже нарисованными
source-in — отображается только та часть изображения, где фигуры пересекаются. Сверху новое изображение
destination-in — отображается только та часть изображения, где фигуры пересекаются. Сверху старое изображение
source-out — отображается только та часть нового изображения, которая не пересекается с другими фигурами
destination-out — отображается только та часть предшествующего изображения, которая не пересекается с другими фигурами
source-atop — у нового изображения отображается только та часть, которая пересекается с предшествующими фигурами
destination-atop — у предшествующего изображения отображается (поверх) только та часть, которая пересекается с новой фигурой.
lighter — место пересечения фигур изменяет цвет на тот, которые получается путем сложения цветов пересекающихся фигур.
darker — место пересечения фигур изменяет цвет на тот, которые получается путем вычитания цветов пересекающихся фигур.
xor — место пересечения фигур прозрачно.
copy — отображается только новая фигура, все остальное удаляется.
Пример
Javascript
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.globalCompositeOperation="destination-over";
Свойство globalAlpha
Определяет уровень прозрачности.
Синтаксис
globalAlpha [=value]
Значение — число в диапазоне от 0 до 1.0 (0 — абсолютно прозрачно, 1 - абсолютно не прозрачно). По умолчанию значение равно 1. Если не задавать значение, тогда будет происходить чтение свойства.
Пример
Javascript
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.fillStyle = "#ff0000";
ctx.fillRect(50,50,100,50);
ctx.beginPath();
ctx.globalAlpha = 0.5;
ctx.fillStyle = "blue";
ctx.arc(100,120,50,0,2*Math.PI,false);
ctx.fill();
Свойство lineCap
Определяет оформление концов линий.