Введение в HTML5 визуальное программирование Canvas

Начнём с инициализации Canvas и отрисовки простого квадрата.

Для начала создайте простой Html документ с следующим кодом (особенности рассмотрим далее):

<html>
<head>
<title>Первая страница с использованием Html5 Canvas</title>



</head>
<body onLoad="init()">

<canvas id="canvas" width="270" height="270">
</canvas>

</body>
</html>

Теперь начнём разбираться что к чему. Для начала мы создали переменные контекст (ctx), высота (h) и ширина (w), присвоили высоте и ширине по 270 пикселей для отрисовки квадрата.

В переменную canvas присваиваем объект canvas, т.е. все методы, классы находятся в переменной canvas.

canvas = document.getElementById("canvas");

Для того чтобы нарисовать квадрат или прямоугольник с помощью html5 canvas нам понадобиться функция strokeRect. Данная функция отрисовывает фигуры без заливки (создаёт обводку). Первые 2 координаты служат для обозначения точки начала рисования, вторые для высоты и ширины фигуры.

Для создания цвета обводки служит параметр контекста ctx.strokeStyle

Теперь инициализируем Canvas

<canvas id="canvas" width="270" height="270">
</canvas>

Поделитесь ссылкой если мы вам помогли!

Читайте также:

HTML5 Теги - Плеер, полоса загрузки, Doctype и прочие!

Рисуем линии, квадрат и круг с помощью Canvas

Работа с изображением в html5 canvas

Анимированный задний фон для сайта с помощью Canvas и Html5

Конвертируем видео в формат .ogv для воспроизведения через html5 плеер

Добавить комментарий:

Минимум 100 символов.
Модераторы detected!

Вы ввели сообщение длиной символов

Три + Пять ? =