- •Лабораторный практикум
- •Лабораторная работа №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. Мультипликация.
- •Запуск мультипликации
- •Запуск и остановка мультипликации
Папоротник
Переходим к классике основ изучения компьютерной графики! Давайте посмотрим, как нарисовать фрактальный лист папоротника с помощью Canvas.
Для описания папоротника нам понадобится матрица афинных преобразований, каждое из которых будет применяться с некоторой вероятностью
<html>
<body>
<canvas id="myCanvas" width="200" height="200" />
<script type='text/javascript'>
var ctx = document.getElementById("myCanvas").getContext("2d");
// Афинные преобразования для каждой из вероятностей
var barnsleyMatrix = [[ 0, 0, 0, 0.16, 0, 0],
[ 0.85, 0.04,-0.04, 0.85, 0, 1.60],
[ 0.20,-0.26, 0.23, 0.22, 0, 1.60],
[-0.15, 0.28, 0.26, 0.24, 0, 0.44]];
// Суммы вероятностей (0.01, 0.85, 0.07, 0.07)
var probability = [0.01, 0.86, 0.93, 1.0];
// Контекст для работы
var ctx = document.getElementById("myCanvas").getContext("2d");
// Ширина и высота холста
var width = ctx.canvas.width;
var height = ctx.canvas.height;
// Пиксели для изображения
var pixels = ctx.createImageData(width, height);
var iterations = 50000;
var p, n;
var x = 0.0;
var y = 0.0;
var xn, yn, xp, yp, j;
// Итерационный процесс
for (var i = 0; i < iterations; i++) {
p = Math.random();
n = 0; while (p > probability[n]) n++;
// Новые координаты
xn = barnsleyMatrix[n][0] * x + barnsleyMatrix[n][1] * y + barnsleyMatrix[n][4];
yn = barnsleyMatrix[n][2] * x + barnsleyMatrix[n][3] * y + barnsleyMatrix[n][5];
x = xn;
y = yn;
// Переводим в экранные координаты
xp = width/2 + Math.floor( x * 20);
yp = height - Math.floor(y * 20);
// Находим место в одномерном массиве пикселей
j = (yp * width + xp) * 4;
// Устанавливаем значения для компонент RGBA
pixels.data[j + 0] = 0;
pixels.data[j + 1] = 180;
pixels.data[j + 2] = 0;
pixels.data[j + 3] = 255;
}
// Записываем итоговый массив пикселей
ctx.putImageData(pixels, 0, 0);
</script>
</body>
</html>
В этом примере надо обратить внимание на два момента:
Доступ к пикселя осуществляется не в прямом виде, а через выгружаемый и записываемый массив пикселей (окно), причем операции чтения и записи разнесены в разные функции и во времени. Опять-таки, API побуждает разработчиков сначала произвести необходимые изменения в пикселях и уже после этого массово внести изменения вместо того, чтобы отдельно читать и записывать каждый из пикселей.
Массив, с которым идет работа, одномерный (хотя у объекта типа ImageData и определены ширина и высота), причем в нем последовательно хранятся не просто пиксели, а значения по каждому из каналов для каждого из пикселей. Другими словами, на каждый пиксель приходится четыре элемента массива (RGBA) со значениями от 0 до 255.
Кстати, как я уже писал в начале, Canvas может легко сочетаться с обычными изображениями и даже видео, в частности, это означает, что на Canvas можно проектировать картинку или текущий кадр видео-потока. В сочетании с доступом к отдельным пикселям, это позволяет делать анализ изображений непосредственно на клиенте с помощью JavaScript.