Войти
» » » Canvas вступление

Canvas вступление

Canvas вступление

Для начала стоит отметить, что разобраться с этой системой Вам помогут базовые знания jаvascript, без них разобраться будет достаточно сложно.

Элемент <сanvas> предназначен для рисования различных фигур на веб-страницах, что позволяет за счёт использования меньшего количества изображений значительно уменьшить вес страницы сайта и увеличить скорость её загрузки.

Для начала элементу <сanvas> нужно будет задать атрибуты:
- id (определяет имя элемента для доступа к нему из скриптов)
- width (ширину) и height (высоту), объекта в котором будет изображена фигура.

Содержимое помещенное между тэгами будет отображено если браузер пользователя не поддерживает элемент canvas, пример:

<canvas id='draw' width='400' height='300'>Если вы видите эту надпись, значит ваш браузер не поддерживает canvas.</canvas>

Стоит уточнить, что сам по себе элемент <сanvas> не рисует фигуры, а только задаёт область в которой будет находиться фигура.

Простейшие методы рисования фигур:

- fillRect(x,y,ширина,высота) - Рисует закрашенный прямоугольник.

- strokeRect(x,y,ширина,высота) - Рисует не закрашенный прямоугольник.

- clearRect(x,y,ширина,высота) - Очищает указанную зону делая ее полностью прозрачной.

В данном случае параметры x и y задают величину смещения прямоугольника по горизонтали (x) и вертикали (y) от верхнего левого угла холста в пикселях.
Пример:

<canvas id='draw' style='border:1px solid' width='200' height='200'></canvas>
<script type='text/jаvascript'>
var canvas=document.getElementById("draw");
var x=canvas.getContext("2d");
x.fillRect(50,40,55,55);
x.strokeRect(150,70,55,55);
x.clearRect(68,57,20,20);

</script>

Пояснения примера:

- var canvas=document.getElementById("draw") - находим нужный холст;
- var x=canvas.getContext("2d") - обращаемся ко встроенному объекту, который содержит различные методы для рисования (первые два шага являются стандартными для рисования любого объекта в canvas);
- x.fillRect(50,40,55,55) - рисуем закрашенный прямоугольник;
- x.strokeRect(150,70,55,55) - рисуем не закрашенный прямоугольник;
- x.clearRect(68,57,20,20) - очищаем зону в закрашенном прямоугольнике.

Теперь давайте рассмотрим более сложные составные фигуры, они состоят из нескольких простых объектов таких как линии, прямоугольники и круги.

Простые фигуры:

- moveTo(x,y) - Устанавливает координаты точки, из которой начнется рисование следующего объекта.

- lineTo(x,y) - Рисует прямую линию.

- arc(x,y,радиус,нач_угол,конеч_угол) - Рисует дугу, которую можно замкнуть, что бы получился круг. Угол необходимо задавать в радианах, а не в градусах (радианы=(Math.PI/180)*градусы).

- rect(x, y, ширина, высота) - Рисует прямоугольник.

Приминение:

beginPath();
/* Простые объекты помещаются здесь */
closePath(); // Автоматически завершает фигуру (соединяет конечную точку с начальной)
//Теперь необходимо вызвать один из методов для рисования фигуры определенной выше
stroke(); //нарисует фигуру не закрашенной
fill(); //нарисует фигуру закрашенной

Пример:

<canvas id='draw' style='border:1px solid' width='200' height='200'></canvas>
<script type='text/jаvascript'>
var canvas=document.getElementById("draw");
var x=canvas.getContext("2d");
x.beginPath();
x.moveTo(20,20);
x.lineTo(70,70);
x.lineTo(20,70);
x.closePath();
x.fill();
</script>

Ещё один пример:

<canvas id='draw' style='border:1px solid' width='200' height='200'></canvas>
<script type='text/jаvascript'>
var x1=(Math.PI/180)*0;
var x2=(Math.PI/180)*360;
var canvas=document.getElementById("draw")
var x=canvas.getContext("2d");
x.beginPath();
x.arc(30,30,20,x1,x2);
x.moveTo(100,100);
x.rect(70,50,70,70);
x.fill();
</script>


Все статьи по теме HTML 5:

- HTML 5 Введение
- Устаревшие теги и атрибуты HTML 5
- Нововведения в структуру документа HTML 5
- Глобальные атрибуты в HTML 5
- Формы HTML 5
- Воспроизведение аудио файлов в HTML 5
- Воспроизведение видео файлов в HTML 5
- Web worker
- Геолокация в HTML 5
- Drag and Drop
- Кэширование страниц
- Макет шаблона HTML 5 с пояснениями
- Справочник тегов HTML 5

Canvas:

- Canvas вступление
- Применение стилей в canvas
- Оформление текста и изображений в canvas