HTML 5 основы создания динамической графики

Содержание

Оглавление

Основы построения кода html5 2

Элемент Canvas 2

Программа new2, new4 4

Программа new5 5

New5 5

New6 6

Анимация 7

New 10 9

New 11 11

Выдержка из текста

Основы построения кода html5

<!DOCTYPE html>

<html lang = "ru">

<head>

<title>html5</title>

<meta charset ="UTF-8" />

</head>

<script src = "scripts.js"></script>

<body>

</body>

</html>

<!DOCTYPE html>

Директива DOCTYPE отвечает за определение типа документа.

<meta charset ="UTF-8" />

Задается кодировка. Кодировка сообщает браузерам, какой набор символов необходимо использовать. Unicode (UTF-8) представляет собой универсальную кодировку.

<html lang = "rus">

Задает основной язык веб-страницы русский.

<script src = "scripts.js"></script>

Добавление элемента script.

Элемент Canvas

<canvas id = “mycanvas” width=”200” height=”200” ></canvas>

Создает элемент canvas.

Элемент canvas можно создать динамически, присоединить его к странице и с помощью CSS выбрать подходящее местоположение.

var mycanvas = document.createElement(“canvas”);

mycanvas.id = “mycanvas”;

document.body.appendChild(mycanvas);

Чтобы нарисовать что-то на элементе canvas, сначала извлеките ссылку на его контекст, а затем выполните команды рисования с использованием этой ссылки.

var mycanvas = document.getElementById(“mycanvas”);

var mycontext = mycanvas.getContext(“2d”);

mycontext.fillRect(5, 5, 145, 145);

<!DOCTYPE html>

<html lang = "ru">

<head>

<title>html5</title>

<meta charset ="UTF-8" />

<script type="text/javascript">

function drawShape()

{

var canvas = document.getElementById('myCanvas');

var context = canvas.getContext('2d');

context.fillRect(25,25,50,50);

context.clearRect(35,35,30,30);

context.strokeRect(100,100,50,50);

}

</script>

</head>

<body onload="drawShape();">

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

</body>

</html>

Список использованной литературы

Список использованной литературы

1. Питер Лабберс, Брайан Олберс, Фрэнк Салим HTML5 для профессионалов: мощные инструменты для разработки современных веб-приложений = Pro HTML5 Programming: Powerful APIs for Richer Internet Application Development. — М.: «Вильямс», 2011. — С. 272. — ISBN 978-5-8459-1715-7

2. Стивен Хольцнер HTML5 за 10 минут, 5-е издание = Sams Teach Yourself HTML5 in 10 Minutes, 5th Edition. — М.: «Вильямс», 2011. — ISBN 978-5-8459-1745-4

3. Steve Fulton, Jeff Fulton HTML5 Canvas; O'Reilly Media — , 2011. — 654 c.

Похожие записи