Rect(x, y, width,height)

х и y – это координаты верхнего левого угла прямоугольника относительно canvas, а width и height – ширина и высота прямоугольника.

Метод fill () заполняет цветом все внутреннее пространство нарисованного пути:

var canvas = document.getElementById("myCanvas"),

context = canvas.getContext("2d");

context.beginPath();

context.rect(30, 20, 100, 90);

context.closePath();

context.strokeStyle = "red";

context.fillStyle = "blue";

context.fill();

context.stroke();

Метод clip () позволяет вырезать из canvas определенную область, а все, что вне этой области, будет игнорироваться при последующей отрисовке.

Метод arc () добавляет к пути участок окружности или арку. Имеет следующее определение:

Arc(x, y, radius, startAngle, endAngle, anticlockwise)

x и y – координаты, в которых начинается арка;

radius – радиус окружности, по которой создается арка;

startAngle, endAngle – начальный и конечный угол, которые усекают окружность до арки. В качестве единицы измерения углов применяются радианы. Например, полная окружность – это 2п радиан. Если нам надо нарисовать полный круг, то параметр endAngle имеет значение 2п. В JavaScript эту величину можно получить с помощью выражения Math.PI*2.

anticlockwise – направление движения по окружности при отсечении ее части, ограниченной начальным и конечным углом. При значении true – направление против часовой стрелки, а при значении false – по часовой стрелке.

Метод arkTo() также рисует дугу. Определение:

ArkTo(x1, y1, x2, y2, radius),

где х1 и y1 – координаты первой контрольной точки, х2 и y2 – координаты второй контрольной точки, radius – радиус дуги.

Метод quadraticCurveTo () создает квадратичную кривую. Имеет следующее определение:

QuadraticCurveTo(x1, y1, x2, y2),

где х1 и y1 – координаты первой опорной точки, х2 и y2 – координаты второй опорной точки.

Метод bezierCurveTo () – рисует кривую Безье. Определение:
bezierCurveTo(x1, y1, x2, y2, x3, y3),

где х1 и y1 – координаты первой опорной точки, х2 и y2 – координаты второй опорной точки, х3 и y3 - координаты третьей опорной точки.

Изображения на canvas

Метод drawImage () – позволяет отдельно выводить изображения на canvas. Определение:

Context.drawImage(image, x, y),

где image передает выводимое изображение, x и y – координаты верхнего левого угла изображения.

var canvas = document.getElementById("myCanvas"),

context = canvas.getContext("2d");

var img = new Image();

img.src = "dubi.png";

img.onload = function() {

context.drawImage(img, 0, 0);

};

</script>

Другая версия метода позволяет дополнительно задать ширину и высоту выводимого изображения: context.drawImage(img, 20, 40, 110, 90);

Добавление теней

Элемент canvas поддерживает добавление теней к нарисованным объектам. Для создания теней применяются следующие свойства:

shadowOffsetX – горизонтальное смещение в пикселях справа (или слева при отрицательном значении);

shadowOffsetY – вертикальное смещение;

shadowBlur – число пикселей для установки размытия тени;

shadowColor – цвет тени.

Трансформации

Элемент canvas поддерживает трансформацию.

Перемещение осуществляется методом translate ():

Translate(x, y),

где параметр указывает на смещение по осям.

Для поворота фигур применяется метод rotate ():

Rotate(angle),

где в качестве параметра передается угол поворота в радианах относительно точки с координатами (0,0)

Для масштабирования фигур применяется метод scale ():

Scale(xScale, yScale),

параметр xScale указывает на масштабирование по оси х, а параметр yScale – по оси y.

Рисование мышью

В canvas можно создавать фигуры динамически, рисуя указателем мыши. Для обработки движения мыши определяются три обработчика – нажатие мыши, перемещение и отпускание мыши. При нажатии мыши устанавливаем переменную draw равным true, т.е. идет рисование. Также при нажатии мы фиксируем точку, с которой будет идти рисование.

При перемещении мыши получаем точку, на которую переместился указатель, и рисуем линию. При отпускании указателя закрываем графический путь методом context.closePath() и сбрасываем переменную draw в false.

var canvas = document.getElementById("myCanvas"),

context = canvas.getContext("2d"),

w = canvas.width,

h=canvas.height;

var mouse = { x:0, y:0};

var draw = false;

canvas.addEventListener("mousedown", function(e){

mouse.x = e.pageX - this.offsetLeft;

mouse.y = e.pageY - this.offsetTop;

draw = true;

context.beginPath();

context.moveTo(mouse.x, mouse.y);