HTML5 CANVAS [1.Основы]

Соответственно как и обещал, накатал статейку, собранную многими умами российских программистов. Так, что если Вы уже знакомы с этим тегом и каким прибором его едят, то наверняка увидите знакомые коды. Но после долгих раздумий и собственного опыта, я понял, что это хорошие примеры для начала исследования, что же такое CANVAS.

Если верить англо-русскому словарю, то можно узнать что canvas переводится как холст, а если верить википедии, то можно узнать что тег canvas, это элемент HTML 5, который предназначен для создания растрового изображения при помощи JavaScript. Тому как создать простейшее растровое изображение и будет посвящен моя небольшая статья. Прежде чем начинать пробовать свои силы в этом не легком деле рекомендуется уже иметь базовые знания о том что такое HTML и с чем едят JavaScript.

Предварительная настройка холста

У нашего подопытного тега есть всего два атрибута — height и width, высота и ширина соответственно, по умолчанию размер холста 150х300 пикселей.
Стоит отметить что canvas создает область фиксированного размера содержимым которого управляют контексты.
Элементарный пример:

[sourcecode language=»javascript» htmlscript=»true»]
<html>
<head>
<title>canvasExample</title>
</head>
<body>
<canvas height=’320′ width=’480′ id=’example’>Обновите браузер</canvas>
<script>
var example = document.getElementById("example");
var ctx = example.getContext(‘2d’);
ctx.fillRect(0, 0, example.width, example.height);
</script>
</body>
</html>
[/sourcecode]

Если сохранить эти несчастные 13 строк в файл и открыть его браузером, то можно будет увидеть область с чёрным прямоугольником, так вот это и есть тот самый холст, на котором нарисован прямоугольник размеры которого равны размерам canvas’а.

Обновите браузер

Прямоугольники

Самой элементарной фигурой которую можно рисовать является прямоугольник. Предусмотрено три функции для отрисовки прямоугольников.
strokeRect(x, y, ширина, высота) : Рисует прямоугольник
fillRect(x, y, ширина, высота) : Рисует закрашенный прямоугольник
clearRect(x, y, ширина, высота) : Очищает область на холсте размер с прямоугольник заданного размера

[sourcecode language=»javascript» htmlscript=»true»]
<html>
<head>
<title>rectExample</title>
</head>
<body>
<canvas id=’example’>Обновите браузер</canvas>
<script>
var example = document.getElementById("example");
var ctx = example.getContext(‘2d’);
example.width = 640;
example.height = 480;
ctx.strokeRect(15, 15, 266, 266);
ctx.strokeRect(18, 18, 260, 260);
ctx.fillRect(20, 20, 256, 256);
for (i=0; i<8; i+=2)
for (j=0; j<8; j+=2) {
ctx.clearRect(20+i*32, 20+j*32, 32, 32);
ctx.clearRect(20+(i+1)*32, 20+(j+1)*32, 32, 32);
}
</script>
</body>
</html>
[/sourcecode]

А теперь краткий построчный разбор:
в строках 10 и 11 мы изменили размер холста — чтоб бы задуманное нами изображение полностью отобразилось,
в строках 12 и 13 мы нарисовали два не закрашенных прямоугольника которые будут символизировать своеобразную рамку нашей «шахматной доски»,
в строке 14 отрисовываем закрашенный прямоугольник размеры которого бы позволил вместить в себе 64 квадрата с шириной стороны 32 пикселя,
в строках с 15 по 19 у нас работает два цикла которые очищают на чёрном прямоугольнике квадратные области в таком порядке что бы в итоге полученное изображение было похоже на шахматную доску
Обновите браузер

Линии и дуги

Рисование фигур составленных из линий выполняется последовательно в несколько шагов:
beginPath()
closePath()
stroke()
fill()

beginPath используется что бы «начать» серию действий описывающих отрисовку фигуры. Каждый новый вызов этого метода сбрасывает все действия предыдущего и начинает «рисовать» занова.
closePath является не обязательным действием и по сути оно пытается завершить рисование проведя линию от текущей позиции к позиции с которой начали рисовать.
Завершающий шаг это вызовом метода stroke или fill. Собственно первый обводит фигуру линиями, а второй заливает фигуру сплошным цветом.
Те кто когда-то на школьных 486х в былые годы рисовал в бейсике домик, забор и деревце по задумке учителя тот сразу поймёт часть ниже. Итак, существуют такие методы как,
moveTo(x, y) : перемещает "курсор" в позицию x, y и делает её текущей
lineTo(x, y) : ведёт линию из текущей позиции в указанную, и делает в последствии указанную текущей
arc(x, y, radius, startAngle, endAngle, anticlockwise) рисование дуги, где x и y центр окружности, далее начальный и конечный угол, последний параметр указывает направление

[sourcecode language="javascript" htmlscript="true"]
<html>
<head>
<title>pathExample</title>
</head>
<body>
<canvas id='example'>Обновите браузер</canvas>
<script>
var example = document.getElementById("example");
var ctx = example.getContext('2d');
example.height = 480;
example.width = 640;
ctx.beginPath();
ctx.arc(80, 100, 56, 3/4*Math.PI, 1/4*Math.PI, true);
ctx.fill();
ctx.moveTo(40, 140);
ctx.lineTo(20, 40);
ctx.lineTo(60, 100);
ctx.lineTo(80, 20);
ctx.lineTo(100, 100);
ctx.lineTo(140, 40);
ctx.lineTo(120, 140);
ctx.stroke();
</script>
</body>
</html>
[/sourcecode]
В строке 14 заливается цветом дуга, в строке 22 обводится контур нашей короны.

Обновите браузер

Кривые Бернштейна-Безье

Что такое кривые Безье я думаю лучше объяснит Википедия.
Нам доступно две функции, для построения кубической кривой Бизье и квадратичной, соотвестствено:
quadraticCurveTo(Px, Py, x, y)
bezierCurveTo(P1x, P1y, P2x, P2y, x, y)

x и y это точки в которые необходимо перейти, а координаты P(Px, Py) в квадратичной кривой это дополнительные точки которые используются для построения кривой. В кубическо кривой соответственно две дополнительные точки.

[sourcecode language="javascript" htmlscript="true"]
<html>
<head>
<title>curveExample</title>
</head>
<body>
<canvas id='example'>Обновите браузер</canvas>
<script>
var example = document.getElementById("example");
var ctx = example.getContext('2d');
example.height = 480;
example.width = 640;
ctx.beginPath();
ctx.moveTo(10, 15);
ctx.bezierCurveTo(75, 55, 175, 20, 250, 15);
ctx.moveTo(10, 15);
ctx.quadraticCurveTo(100, 100, 250, 15);
ctx.stroke();
</script>
</body>
</html>
[/sourcecode]

Обновите браузер

Добавим цвета

Что бы наше изображение было не только двух цветов, а любого цвета предусмотрено, два свойства
fillStyle = color : определяет цвет заливки
strokeStyle = color : цвет линий цвет задается точно так же как и css, на примере все четыре способа задания цвета

цвет задается точно так же как и css, на примере все четыре способа задания цвета
// все четыре строки задают оранжевый цвет заливки
ctx.fillStyle = "orange";
ctx.fillStyle = "#FFA500";
ctx.fillStyle = "rgb(255,165,0)";
ctx.fillStyle = "rgba(255,165,0,1)"

аналогично задаётся и цвет для линий.

Возьмём пример с шахматной доской и добавим в него немного цвета:

[sourcecode language="javascript" htmlscript="true"]
<html>
<head>
<title>rectExample</title>
</head>
<body>
<canvas id='example'>Обновите браузер</canvas>
<script>
var example = document.getElementById("example");
var ctx = example.getContext('2d');
example.width = 640;
example.height = 480;
ctx.strokeStyle = '#B70A02'; // меняем цвет рамки
ctx.strokeRect(15, 15, 266, 266);
ctx.strokeRect(18, 18, 260, 260);
ctx.fillStyle = '#AF5200'; // меняем цвет клеток
ctx.fillRect(20, 20, 256, 256);
for (i=0; i<8; i+=2)
for (j=0; j<8; j+=2) {
ctx.clearRect(20+i*32, 20+j*32, 32, 32);
ctx.clearRect(20+(i+1)*32, 20+(j+1)*32, 32, 32);
}
</script>
</body>
</html>
[/sourcecode]

Обновите браузер

Вот впринципе и все основы, которые я нашел в просторах интернета. Они довольно простые, для тех кто знаком с JavaScript. В следующих статьях я рассмотрю обработку изображений и еще несколько интересных штук! Оставайтесь на связи!