Синтаксис. Параметры обязательны.

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)