Содержание
Оглавление
Основы построения кода 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.