Для того, чтобы начать «рисовать» при помощи HTML5 Canvas и JavaScript, стоит подготовить все необходимые условия. Их мы и разберем.
Подбираем любой удобный Вам редактор, будь то блокнот, Notepad++ и т.д., создаем файл с расширением «*.html».
Для большего понимания советую ознакомиться с языком HTML в целом (http://htmlbook.ru/).
Начнем.
В HTML5 определен элемент <canvas>как «растровый холст, который может быть использован для отображения диаграмм, игровой графики и т.д. Холст - это прямоугольная область на вашей странице, где с помощью JavaScript можно рисовать что пожелаете. У тега есть всего два атрибута — height и width.
Пример для разбора:
<!doctype html> <html> <head> <title>canvasExample</title> <meta charset='utf-8' /> </head> <body> <canvas id="canvas" width="500" height="500"></canvas> <script> canvas = document.getElementById('canvas'); c = canvas.getContext('2d'); </script> <script> c.moveTo(20,90); c.lineTo(90,90); c.stroke(); </script> </body> </html>
Элемент <!DOCTYPE> предназначен для указания типа текущего документа. Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, поскольку HTML существует в нескольких версиях.
Это, скажем так, скелет документа html:
<html> <head> </head> <body> </body> </html>
<meta> определяет метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем.
Атрибуты:
charset- Указывает кодировку документа. Атрибут введен в HTML5 и предназначен для сокращения формы тега , которая задавала кодировку в предыдущих версиях HTML и XHTML.
<meta charset="кодировка">
content-Устанавливает значение атрибута, заданного с помощью name или http-equiv.
http-equiv-Предназначен для конвертирования метатега в заголовок HTTP.
name-Имя метатега, также косвенно устанавливает его предназначение.
У вас может быть несколько элементов <canvas> на одной странице. Каждый холст будет отображаться в DOM и сохранять свое собственное состояние. Если вы добавите каждому холсту атрибут id, то можете получить к ним доступ, как и к любому другому элементу.
<canvas id="a" width="300" height="225"></canvas>
Теперь легко можно обнаружить элемент <canvas> в DOM.
var a_canvas = document.getElementById("a");
Однако у нас пока что используется лишь один холст, так что название не будет отличаться от самого тега.
<canvas id="canvas" width="500" height="500"></canvas>
&
canvas = document.getElementById('canvas');
Каждый холст имеет контекст рисования. Как только вы нашли элемент