Методы и свойства canvas

Добрый день %username%! Как то давно, бороздя просторы Интернета, читал статейки про HTML5 элемент canvas. Был удивлён, что все статьи про этот чудо элемент, написаны как пример, и никто не описывает просто методы - что, зачем и почему. После выхода черновой спецификации HTML5 был БУМ статей про canvas и опять все основаны на том или ином примере. Поэтому в данной публикации хочу выложить просто описание методов объекта canvas. В первую очередь получим объект canvas, для этого определён метод getContext().

<canvas id="canvas" width="300" height="100"></canvas>

<script type="text/javascript">

var canvas = document.getElementById('canvas'); // получаем элемент

var cnv = canvas.getContext('2d'); // получаем объект canvas

</script>

Теперь мы можем работать с объектом cnv.

Стиль пера и кисти

Перо предназначено для вывода контуров, а кисть для заливки.

• cnv.strokeStyle - свойство определяет стиль пера;

• cnv.fillStyle - свойство определяет стиль кисти.

Значением этих свойств может выступать:

• Cтока в стиле шестнадцатеричные спецификаторы цвета. Например, "#ff0000";

• RGB функции, вида "rgb(красный, зеленый, синий)". Например, "rgb(255,0,0)" и "rgb(100%, 0%, 0%)";

• RGBА функция с альфа-каналом, "rgbа(красный, зеленый, синий, альфа)". Например "rgbа(255,0,0,0.5)"

• Объект, создаваемый одним из следующих методов: createLinearGradient(x1,y1,x2,y2) - создаёт объекта линейного градиента; createRadialGradient(x1,y1,r1,x2,y2,r2) - создаёт объекта радиального градиента; createPattern(image,type) - шаблон закраски, аргумент type может принимать значения: repeat - повторять шаблон; repeat-x - повторять шаблон по x; repeat-y - повторять шаблон по y; no-repeat - не повторять шаблон.

cnv.strokeStyle = "#FF0000";

cnv.fillStyle = "rgbа(255, 0, 0, 0.5)";

Также кроме прозрачности в значении цвета функции RGBА, можно определить глобальное значение прозрачности используя свойство globalAlpha. Оно принимает значение от 0 до 1.0.

Контуры

Методы для работы с контурами:

• cnv.beginPath() - начинает сложный контур;

• cnv.closePath() - завершает сложный контур;

• cnv.moveTo(x, y) - переместить текущие координаты пера в (x, y);

• cnv.lineTo(x, y) - нарисовать линию от текущих координат до указанных в (x, y);

• cnv.stroke() - обвести контур пером;

• cnv.fill() - закрасить контур кистью;

• cnv.quadraticCurveTo(cp1x, cp1y, x, y) - выводит кривую второго порядка;

• cnv.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) - выводит кривую Безье;

• cnv.arc(x, y, radius, startAngle, endAngle, anticlockwise) - выводит дугу;

• cnv.arcTo(x1,y1,x2,y2,radius) - добавляет к контуру дугу;

• cnv.clip() - добавляет область текущего контура к текущей области в которой возможен вывод.

• cnv.isPointInPath(x,y) - определяет, находится ли точка внутри контура, возвращает true или false.

Четырёхугольники

Методы для работы с четырёхугольниками:

• cnv.rect(x, y, width, height) - выводит четырехугольник;

• cnv.fillRect(x,y,width,height) - закрашенный четырехугольник;

• cnv.strokeRect(x,y,width,height) - контур четырехугольника;

• cnv.clearRect(x,y,width,height) - очистка четырехугольника.

Под четырёхугольниками, тут понимается не просто видимая фигура. Например метод clearRect может использоваться как ластик.