HTML HTML5 XHTML ПРИМЕРЫ СПРАВОЧНИК РЕКЛАМА ГОСТЕВАЯ

Урок 5 HTML5 Холст, Рисование, Графика


« Назад Далее »

Элемент canvas (холст) используется для рисования графики на веб странице.



Что Такое Холст?

HTML5 элемент canvas использует JavaScript для рисования графики на веб странице.

Холст - это прямоугольная площадь, и вы можете контролировать каждый пиксел на ней.

Элемент canvas имеет несколько методов для рисования траекторий, прямоугольников, окружностей, символов и добавления изображений.


Создание Элемента Холст

Добавьте элемент canvas к странице HTML5.

Укажите идентификатор id, ширину width, и высоту height для элемента:

<canvas id="myCanvas" width="200" height="100"></canvas>


Рисуйте с Помощью JavaScript

Сам по себе элемент canvas не имеет возможностей рисования. Все рисование должно выполняться в скрипте:

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>

Попробуйте сами »

JavaScript использует идентификатор id, чтобы найти элемент canvas:

var c=document.getElementById("myCanvas");

Затем создается объект контекста:

var cxt=c.getContext("2d");

Объект getContext("2d") - это встроенный в HTML5 объект с многочисленными методами для рисования траекторий, прямоугольников, окружностей, символов и много другого.

Следующие две строки рисуют красный прямоугольник:

cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);

Метод fillStyle делает его красным, а метод fillRect указывает форму, положение и размер прямоугольника.


Координаты

Метод fillRect выше имеет параметры (0,0,150,75).

Это означает: Нарисовать прямоугольник размером 150x75 на холсте, начиная с левого верхнего угла (0,0).

Координаты холста X и Y используются для позиционирования рисуемых фигур на холсте.

Переместите мышь над прямоугольником ниже, чтобы увидеть координаты:

  X  
Y
 

Еще Примеры Работы с Холстом

Ниже приведены дополнительные примеры рисования на элементе canvas:

Пример - Линия

Рисует линию, указывая где начать и где остановиться:


Попробуйте сами »

Пример - Круг

Рисует круг, задав размер, цвет и положение:


Попробуйте сами »

Пример - Градиент

Рисует градиентный фон с указанными цветами:


Попробуйте сами »

Пример - Изображение

Вставляет изображение на холст:


Попробуйте сами »




« Назад Далее »
© 2011-2017 Уроки HTML
Рейтинг@Mail.ru