Рекомендуемая категория для самостоятельной подготовки:
Контрольная работа*
| Код |
298404 |
| Дата создания |
05 марта 2014 |
| Страниц |
12
|
Мы сможем обработать ваш заказ (!) 23 декабря в 12:00 [мск] Файлы будут доступны для скачивания только после обработки заказа.
|
Описание
Описание языковых конструкций HTML 5 используемых в построении графики. Приводится полный код оригинальных примеров динамической графики на javascript в 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>
Фрагмент работы для ознакомления
getElementById('myCanvas'); var context = canvas.getContext('2d'); context.fillRect(25,25,50,50); }</script></head><body onload="drawShape();"> <canvas id="myCanvas" width="200" height="200"></canvas></body></html>Программа new5rotate() Эта функция в качестве единственного аргумента принимает угол в радианах. Все что отрисовывается после выполнения этого метода будет повернуто на заданный угол относительно начала координат.context.rotate(30 * Math.PI/180);context.fillRect(25,25,50,50);translate()изменяет позицию изображения.New5<!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'); var rectX = 200, rectY = 200, rectW = 100, rectH = 100, rectAngle = 30;context.translate(rectX, rectY);context.rotate(rectAngle * Math.PI/180);context.fillStyle = "blue";context.fillRect(-rectW/2,-rectH/2,rectW,rectH);}</script></head><body onload="drawShape();"> <canvas id="myCanvas" width="640" height="480"></canvas></body></html>New6<!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'); var rectX = 200, rectY = 200, rectW = 50, rectH = 50, rectAngle = 30;context.translate((rectX+rectW/2), (rectY+rectH/2));context.rotate(rectAngle * Math.PI/180);context.fillStyle = "blue";context.fillRect(-rectW/2,-rectH/2,rectW,rectH);}</script></head><body onload="drawShape();"> <canvas id="myCanvas" width="640" height="480"></canvas></body></html>Если в rotate указать координаты равные половине длине и ширине картинки , то вращение будет вокруг своей оси.АнимацияУправление анимацией может осуществляться двумя способами: с помощью функции setInterval или с помощью функции setTimeout, каждая из которых может быть использована для вызова той или иной функции после истечения заданного периода времени. Функция setInterval исполняет заданный код многократно. Функция setTimeout исполняется всего один раз после истечения отведенного периода времени.setIntervalСинтаксис intervalID = window.setInterval(func|code, delay)Аргументыfunc|codeФункция или строка кода для выполненияdelayИнтервал в миллисекундах, т.е 1000 это 1 секундаОписание, примерыВ отличие от метода setTimeout, setInterval выполняет код много раз, через равные промежутки времени, пока не будет остановлен при помощи clearInterval.В каком виде указывать первый параметр - разницы нет. При указании строки кода - динамически создается функция с телом code.Следующие два вызова почти одинаковы:1// (1)2setInterval('alert("прошла секунда")', 1000) 3 4// (2)5function sec() { 6 alert("прошла секунда")7}8setInterval(sec, 1000) // использовать функцию Но более правильным считается объявление функции в явном виде, например так: setInterval(function() { alert(...) }, 1000)Вызов со строкой существует для совместимости с прежними версиями javascript.thisФункция выполняется в другом контексте, со значением this = window, поэтому о передаче правильного this надо позаботиться отдельно.1object = { 2 func: function() { alert(this) }3}4 5setInterval( object.func , 1000) // this будет равно window6 7// правильный вариант с передачей this8setInterval( function() { object.func.call(object) } , 1000)Отмена выполненияВы можете отменить выполнение setInterval при помощи clearInterval, используя для этого идентификатор intervalID.var intervalID = setInterval(...)clearInterval(intervalID)В функции Render мы очищаем канвас и выводим по очереди каждый элемент function Render(){ context.clearRect(0, 0, canvas.width, canvas.height); context.fillStyle="#094464"; context.fillRect(0, 0, canvas.width, canvas.
Список литературы
Список использованной литературы
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.
Пожалуйста, внимательно изучайте содержание и фрагменты работы. Деньги за приобретённые готовые работы по причине несоответствия данной работы вашим требованиям или её уникальности не возвращаются.
* Категория работы носит оценочный характер в соответствии с качественными и количественными параметрами предоставляемого материала. Данный материал ни целиком, ни любая из его частей не является готовым научным трудом, выпускной квалификационной работой, научным докладом или иной работой, предусмотренной государственной системой научной аттестации или необходимой для прохождения промежуточной или итоговой аттестации. Данный материал представляет собой субъективный результат обработки, структурирования и форматирования собранной его автором информации и предназначен, прежде всего, для использования в качестве источника для самостоятельной подготовки работы указанной тематики.
Другие контрольные работы
bmt: 0.00464