- •Лабораторный практикум
- •Лабораторная работа №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. Мультипликация.
- •Запуск мультипликации
- •Запуск и остановка мультипликации
С помощью свойства lineCap можно оформлять кончики линии
<html>
<body>
<canvas id='draw' width='230' height='90' style='border:1px solid;padding:20px'></canvas>
<script type='text/javascript'>
var canvas=document.getElementById("draw")
var x=canvas.getContext("2d");
//Нарисуем линию с закругленным кончиком
x.beginPath()
x.moveTo(10,10);
x.lineWidth=10;
x.lineCap='round';
x.lineTo(200,10);
x.stroke();
//Нарисуем линию с квадратным кончиком
x.beginPath();
x.moveTo(10,40);
x.lineWidth=10;
x.lineCap='square';
x.lineTo(200,40);
x.stroke();
//Нарисуем линию со стандартным кончиком
x.beginPath();
x.moveTo(10,70);
x.lineWidth=10;
x.lineCap='butt';
x.lineTo(200,70);
x.stroke();
</script>
</body>
</html>
С помощью свойства lineJoin можно сглаживать стыки двух линий.
<html>
<body>
<canvas id='draw' width='240' height='200' style='border:1px solid;padding:20px;'></canvas>
<script type='text/javascript'>
var canvas=document.getElementById("draw")
var x=canvas.getContext("2d");
//Сгладим стыки линий
x.beginPath()
x.moveTo(10,10);
x.lineWidth=15;
x.lineJoin='round';
x.lineTo(50,50);
x.lineTo(100,10);
x.lineTo(170,80);
x.lineTo(210,40);
x.stroke();
//Нарисуем стыки не сглаженными (значение по умолчанию)
x.beginPath()
x.moveTo(10,100);
x.lineWidth=15;
x.lineJoin='miter';
x.lineTo(50,140);
x.lineTo(100,100);
x.lineTo(170,170);
x.lineTo(210,130);
x.stroke();
</script>
</body>
</html>
Градиентная заливка
С помощью метода createLinearGradient(x1,y1,x2,y2) можно создать линейный градиент. Параметры x1 и y1 устанавливают координаты начальной, а x2 и y2 конечной точки градиента.
После того, как градиент создан необходимо указать цвета перехода. Это можно сделать с помощью метода addColorStop(точка,цвет).
Например, если нужно создать градиент, который плавно изменяет цвет с черного на белый необходимо установить черный цвет в точке 0 (так условно начальная точка градиента) и белый цвет в точке 1 (конечная точка градиента).
<html>
<body>
<canvas id='draw' width='240' height='200' style='border:1px solid;'></canvas>
<script>
var canvas=document.getElementById("draw")
var x=canvas.getContext("2d");
/* Создаем градиент */
var grad = x.createLinearGradient(0,0,0,150);//начало и конец
/* Добавляем точки цветового перехода */
grad.addColorStop(0.0,'black');
grad.addColorStop(1.0,'white');
/* Устанавливаем получившийся градиент как свойство заливки */
x.fillStyle=grad;
/* Рисуем фигиру, к которой будет применен созданный градиент */
x.fillRect(20,20,200,200);
</script>
</body>
</html>
Можно создавать более сложные градиенты, которые изменяют цвет в нескольких точках.
<html>
<body>
<canvas id='draw' width='240' height='200' style='border:1px solid;'></canvas>
<script>
var canvas=document.getElementById("draw")
var x=canvas.getContext("2d");
/* Создаем градиент */
var grad = x.createLinearGradient(50,50,150,150);
/* Добавляем точки цветового перехода */
grad.addColorStop(0.0,'#d2006b');//Розовый цвет в начале
grad.addColorStop(0.5,'#00a779');//Бирюзовый цвет в середине
grad.addColorStop(1.0,'#ffe800');//Желтый цвет в конце
/* Устанавливаем получившийся градиент как свойство заливки */
x.fillStyle=grad;
/* Рисуем фигиру, к которой будет применен созданный градиент */
x.fillRect(20,20,190,150);
</script>
</body>
</html>
Создание теней
Метод |
Описание |
shadowOffsetX |
Смещение тени от объекта по горизонтали (может принимать отрицательные значения). |
shadowOffsetY |
Смещение тени от объекта по вертикали (может принимать отрицательные значения). |
shadowBlur |
Величина размытия тени. |
shadowColor |
Цвет тени (по умолчанию черный). |
<html>
<body>
<canvas id='draw' width='300' height='200' style='border:1px solid'></canvas>
<script type='text/javascript'>
var canvas=document.getElementById("draw")
var x=canvas.getContext("2d");
x.shadowOffsetX=3;
x.shadowOffsetY=3;
x.shadowBlur=8;
x.shadowColor='black';
x.fillStyle='#ffaa00';
x.fillRect(50,40,55,55);
</script>
</body>
</html>
Текст
Метод fillText("текст",x,y) позволяет отображать в элементе canvas произвольный текст.
<html>
<body>
<canvas id='draw' width='240' height='180' style='border:1px solid;'></canvas>
<script type='text/javascript'>
var canvas=document.getElementById("draw")
var x=canvas.getContext("2d");
x.fillText("Теперь можно отображать", 15, 40);
x.fillText("произвольный текст", 100, 70);
x.fillText("в элементе canvas.", 60, 120);
</script>
</body>
</html>
Текст отображаемый в canvas может быть оформлен с помощью свойства font.
<html>
<body>
<canvas id="draw" width="300" height="160" style="border:1px solid;"></canvas>
<script type="text/javascript">
var canvas=document.getElementById("draw")
var x=canvas.getContext("2d");
x.font='15px Verdana';
x.fillStyle='#60016d';
x.fillText("Теперь можно отображать", 10, 40);
x.font='25px Arial';
x.fillStyle='#007439';
x.fillText("произвольный текст", 10, 80);
x.fillStyle='#a67800';
x.font='20px Comic Sans MS';
x.fillText("в элементе canvas.", 50, 120);
</script>
</body>
</html>
Примеры
Дорожный знак
<html>
<body>
<canvas id="myCanvas" width="200" height="200" />
<script type='text/javascript'>
var ctx = document.getElementById("myCanvas").getContext("2d");
var width = ctx.canvas.width;
var height = ctx.canvas.height;
// Радиус и центр круга
var radius = 0.4 * width;
var cx = width / 2;
var cy = height / 2;
// Делаем путь для круга от 0 до 2PI
ctx.beginPath();
ctx.arc(cx, cy, radius, 0, Math.PI * 2);
ctx.closePath();
// Устанавливаем отрисовку с тенью
ctx.shadowBlur = 10;
ctx.shadowColor = "black";
// Устанавливаем ширину и цвет линии и отрисовываем
ctx.lineWidth = 25;
ctx.strokeStyle = "#f00";
ctx.stroke();
// Убираем тень
ctx.shadowColor = "transparent";
// Создаем радиальный градиент для заливки
var gradient = ctx.createRadialGradient(cx, cx, 0, cx, cy, radius);
gradient.addColorStop(0, "#ddd");
gradient.addColorStop(1, "#eee");
// Устанавливаем градиент и делаем заливку
ctx.fillStyle = gradient;
ctx.fill();
// Устанавливаем стили текста и центрирование
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.font = "bold 55px 'Segoe UI', 'Tahoma', sans-serif";
ctx.fillStyle = "#333";
// Выводим надпись
ctx.fillText("STOP", cx, cy);
</script>
</body>
</html>