- •Лабораторный практикум
- •Лабораторная работа №1 Основы разметки гипертекста html
- •Введение
- •Заголовки
- •Оформление текста
- •Создание списков
- •Гиперссылки
- •Изображения в html-документе
- •Задание 1.
- •Задание2.
- •Задание 3
- •Лабораторная работа №2 Создание таблиц в html-документах
- •Создание таблицы
- •Задание
- •Контрольные вопросы.
- •Лабораторная работа №3 Каскадные таблицы стилей
- •Введение
- •Внутренние таблицы стилей.
- •Встроенные таблицы стилей.
- •Структура правила.
- •Селекторы классов.
- •Универсальные селекторы.
- •Комментарии css.
- •Объединение css и html.
- •Элемент style.
- •Директива @import.
- •Задание 1.
- •Задание 2.
- •Задание 3.
- •Стандартные имена для фреймов
- •Специальные эффекты, получаемые с помощью атрибута target
- •Задание
- •Контрольные вопросы
- •Лабораторная работа №5 Формы
- •Введение
- •Элементы ввода данных
- •Многострочный текст, атрибуты текстовых элементов
- •Альтернативная кнопка, перегрузка атрибутов формы
- •Выбор из списка
- •Генерирование открытого и секретного ключей
- •Другие элементы форм
- •Атрибуты элементов ввода
- •Задание.
- •Контрольные вопросы.
- •Лабораторная работа №6 Объектно Ориентированное Программирование в JavaScript.
- •Основные понятия:
- •Объект.Метод("параметры метода")
- •Значение по умолчанию
- •Применяется к тегам
- •Событие onchange
- •Событие onclick
- •Событие ondblclick
- •Задание №1
- •Размещение JavaScript на html-странице
- •Типы данных
- •Объявления переменных
- •Переменные
- •Типы переменных
- •Массивы
- •Объекты JavaScript
- •Объект Array
- •Оператор цикла
- •Условные операторы
- •Объектная модель JavaScript
- •Объекты и Свойства
- •Функции и Методы
- •Определение Методов
- •Создание Новых Объектов
- •Использование this для Ссылок Объекта
- •Объектная модель браузера
- •Объект window
- •Лабораторная работа № 8 Изучение языка php
- •Общие правила построения php-программы
- •Задание
- •1. Вывод на экран и переменные в рнр.
- •2. Передача параметров по ссылке, передача параметров из формы (get и post -- запросы).
- •3. Динамическое формирование страницы.
- •4. Работа с файлами.
- •Лабораторная работа № 10 Работа вебсайта
- •Как еще можно прописать сайт в Денвере?
- •Лабораторная работа № 11 Файловый ввод/вывод
- •1) Классическая модель веб-приложения
- •2) Модель ajax
- •Лабораторная работа №12 Внедрение рисунков
- •1. Основные положения
- •Рисование прямоугольников
- •Рисование составных фигур Составные фигуры состоят из нескольких соединенных простых объектов (таких как линии, круги и т.Д.)
- •Структура программы выглядит следующим образом
- •С помощью свойства lineCap можно оформлять кончики линии
- •Можно создавать более сложные градиенты, которые изменяют цвет в нескольких точках.
- •Папоротник
- •Гипно-спираль
- •Вставка изображений
- •4. Вложение изображения с помощью data: url
- •Рисование изображений
- •Пример 1 использования изображения
- •Масштабирование
- •Пример 2 использования изображения
- •Разрезание изображений
- •Пример 3 использования изображения
- •Пример галереи
- •Javascript графика: Объект Image.
- •Javascript графика: src и lowsrc.
- •Изменение картинки.
- •Мультипликация в JavaScript. Мультипликация.
- •Запуск мультипликации
- •Запуск и остановка мультипликации
Разрезание изображений
Третий и последный типа методаdrawImageвключает 8 новых параметров. Мы будем использовать этот метод чтобы отбражать часть изображения на холсте
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
Первый параметр image, определяет идентификатор изображения. Следующие 2 элемента определяют положения верхнего левого угла вырезаного изображения относительного исходного положения а, следующие два параметра определяют высоту и ширину вырезаного изображения. Следующие два параметра определяют положение изображения на холсте а, следующие два параметра масштаб изображения.
Разрезание можно использовать чтобы обьеденить все элементы в один файл, что позволяет ускорить работу сайта а, также не загружать все элементы по отдельности.
Пример 3 использования изображения
В этом примере мы будем вырезать голову носорога и вставлять ее в рамку.
В этом примере мы используем другой подход к загрузке изображений, чем в примере выше.Мы просто размечаем изображения непосредственно в HTML документе и используем правила CSS, чтобы скрыть их. Обоим изображениям мы присваиваем атрибут id чтобы их было легче выбрать. Скрипт сам по себе очень прост.Сначала мы вырезаем голову носорого и помещаем ее на холст а, затем помещаем изображение рамки на холст.
Посмотреть этот пример
function draw() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// Draw slice
ctx.drawImage(document.getElementById('source'),
33,71,104,124,21,20,87,104);
// Draw frame
ctx.drawImage(document.getElementById('frame'),0,0);
}
Пример галереи
Вфинальном примере мы сделаем простую галерею изображений. Галерея состоит из таблицы содержащей несколько изображений. При загрузке страницы каждое изображение вставляется на холст а, затем и рамка вокруг него.
Код ниже, должен говорить сам за себя.Мы используем цикл и добавляем новые элементы на холст.Наверное, единственное, что можно отметить, для тех, кто не очень знаком с DOM, является использование insertBefore метода. insertBefore это метод родительского узла (ячейки таблицы) в который мы хотим вставить наш новый узел (холст).
Посмотреть этот пример
function draw() {
// Loop through all images
for (i=0;i<document.images.length;i++){
// Don't add a canvas for the frame image
if (document.images[i].getAttribute('id')!='frame'){
// Create canvas element
canvas = document.createElement('CANVAS');
canvas.setAttribute('width',132);
canvas.setAttribute('height',150);
// Insert before the image
document.images[i].parentNode.insertBefore(canvas,document.images[i]);
ctx = canvas.getContext('2d');
// Draw image to canvas
ctx.drawImage(document.images[i],15,20);
// Add frame
ctx.drawImage(document.getElementById('frame'),0,0);
}
}
}
Итак существует три перегруженных функции drawImage:
drawImage(pic, 0, 0); // Рисуем изображение от точки с координатами 0, 0
drawImage(image, x, y, width, height) // параметры width, height меняют ширину и высоту изображения
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
// Первый параметр указывает то, какое изображение обрабатывать
// sx, sy, sWidth, sHeight указывают параметры фрагмента на изображение-источнике
// dx, dy, dWidth, dHeight ответственны за координаты отрисовки фрагмента на холсте
Метод CLIP()
Метод позволяет вырезать изображение по заранее созданной маске.
<html>
<head>
<canvas id="myCanvas" width="800" height="700" >Треугольное изображение</canvas>
<script type='text/javascript'>
// Контекст для работы
var ctx = document.getElementById("myCanvas").getContext("2d");
var img1 = new Image();
img1.src = 'd:/MySite/forest.jpg';
function drawPoligon(){
//Создается маска
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(470,470);
ctx.lineTo(20,470);
ctx.closePath();
ctx.clip(); //Вырезается кусок канвы
ctx.drawImage(img1,0,0); // Строится изображение
}
</script>
</head>
<body onload='drawPoligon()'>
</body>
</html>
Если теперь еще раз изменить маску, то она отрежет оставшуюся часть канвы
<html>
<head>
<canvas id="myCanvas" width="800" height="700" ></canvas>
<script type='text/javascript'>
// Контекст для работы
var ctx = document.getElementById("myCanvas").getContext("2d");
var img1 = new Image();
img1.src = 'd:/MySite/forest.jpg';
function drawPoligon(){
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(470,470);
ctx.lineTo(20,470);
ctx.closePath();
ctx.clip(); //Вырезается кусок канвы
ctx.beginPath();
ctx.moveTo(10,100);
ctx.lineTo(200,100);
ctx.lineTo(200,150);
ctx.lineTo(50,150);
ctx.closePath();
ctx.clip(); //Еще раз Вырезается кусок канвы
ctx.drawImage(img1,0,0);
}
</script>
</head>
<body onload='drawPoligon()'>
</body>
</html>
Для того, чтобы при повсторном разрезании осталась прежняя канва используются методы ctx.save() и ctx.restore(). Вызов функций save() перед операцией обрезания и restore() после нее позволяют вернуть canvas в первоначальное состояние.
<html>
<head>
<canvas id="myCanvas" width="800" height="700" ></canvas>
<script type='text/javascript'>
// Контекст для работы
var ctx = document.getElementById("myCanvas").getContext("2d");
var img1 = new Image();
img1.src = 'd:/MySite/forest.jpg';
function drawPoligon(){
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(470,470);
ctx.lineTo(20,470);
ctx.closePath();
ctx.save(); //сохранение канвы
ctx.clip(); //вырезание участка канвы
ctx.restore(); //возвращение прежней канвы
ctx.beginPath();
ctx.moveTo(10,100);
ctx.lineTo(200,100);
ctx.lineTo(200,150);
ctx.lineTo(50,150);
ctx.closePath();
ctx.clip();
ctx.drawImage(img1,0,0);
}
</script>
</head>
<body onload='drawPoligon()'>
</body>
</html>
Метод ROTATE()
Метод ROTATE(alfa)позволяет повернуть изображение на уголalfaвыраженный в радианах. Например,
<html>
<head>
<canvas id="myCanvas" width="800" height="700" ></canvas>
<script type='text/javascript'>
// Контекст для работы
var ctx = document.getElementById("myCanvas").getContext("2d");
var img1 = new Image();
img1.src = 'd:/MySite/forest.jpg';
function drawPoligon(){
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(470,470);
ctx.lineTo(20,470);
ctx.closePath();
ctx.clip();
ctx.rotate(0.5);
ctx.drawImage(img1,0,0);
}
</script>
</head>
<body onload='drawPoligon()'>
</body>
</html>
Смещение канвы
В некоторых случаях приходится указывать участок экрана, на котором будет размещаться канва
<html>
<head>
<canvas id="myCanvas" width="500" height="500" style="position: absolute; top:10px; margin: 0px; border: 2px solid black;">
Ваш браузер не поддерживает Canvas.
</canvas>
<script type='text/javascript'>
myCanvas.style.top = "200px";
myCanvas.style.left = "200px";
// Контекст для работы
var ctx = document.getElementById("myCanvas").getContext("2d");
var img1 = new Image();
img1.src = 'd:/MySite/forest.jpg';
function drawPoligon(){
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(470,470);
ctx.lineTo(20,470);
ctx.closePath();
ctx.clip();
ctx.rotate(0.5);
ctx.drawImage(img1,0,0);
}
</script>
</head>
<body onload='drawPoligon()'>
</body>
</html>
Задание на выполнение лабораторной работы
1. Создать прямоугольное изображение с изменяющимися во времени размерами.
2. Создать изображение оганиченное окружностью с изменяющимся во времени диаметром.
3. Создать вращающееся изображение вокруг собственной оси.
4. Создать изображение вращающееся вокруг верикальной оси.
Использованные источники
http://html5insight.ru/
Работа с графикой