- •Московский государственный университет
- •If (canvas.GetContext){
- •Рисование прямоугольников
- •Рисование составных фигур Составные фигуры состоят из нескольких соединенных простых объектов (таких как линии, круги и т.Д.)
- •Структура программы выглядит следующим образом
- •X.BeginPath();
- •X.BeginPath();
- •X.FillRect(20,20,200,200);
- •X.FillRect(50,40,55,55);
- •Папоротник
- •Гипно-спираль
- •Вставка изображений
- •4. Вложение изображения с помощью data: url
- •Рисование изображений
- •Пример 1 использования изображения
- •Масштабирование
- •Пример 2 использования изображения
- •Разрезание изображений
- •Пример 3 использования изображения
- •Пример галереи
- •Javascript графика: Объект Image.
- •Javascript графика: src и lowsrc.
- •Изменение картинки.
- •Мультипликация в JavaScript. Мультипликация.
- •Запуск мультипликации
- •Запуск и остановка мультипликации
Московский государственный университет
ПРИБОРОСТРОЕНИЯ И ИНФОРМАТИКИ
Кафедра ИС 1 «Информационно управляющие системы»
Экз.№__
УТВЕРЖДАЮ
Заведующий кафедрой___
_________ (Ивченко В.Д.)
«___»_________2012г.
Только для студентов по
специальности 220201
МЕТОДИЧЕСКИЕ УКАЗАНИЯ
ПО ВЫПОЛНЕНИЮ ЛАБОРАТОРНОГО ПРАКТИКУМА
"Основы программирования"
Обсуждены на заседании кафедры
(предметно-методической секции)
«__»___________2012г.
Протокол № __
МГУПИ – 2012г.
Лабораторная работа №1
Внедрение рисунков
1. Основные положения
Для выполнения рисунков в браузере его, точнее его часть нужно перевести в графический режим, точнее получить доступ к каждому пикселю. Для этого предназначен тег <CANVAS>. Canvas — это растровый холст, на котором можно рисовать с помощью методов JavaScript, предоставляющий базовые возможности: отрисовку примитивов и текста, побитовый доступ к изображению, вывод изображений и афинные преобразования контекста отрисовки. Canvas имеет около 40 методов и 20 атрибутов, которые можно разбить на несколько групп (см. например, вот эту шпаргалку).
CANVAS
Тег <canvas> предоставляет ограниченную область для рисования в ней. Она используется для рисования графики с помощью JavaScript. Вот так выглядит описание этого элемента:
<canvas id="example" width="400" height="200"></canvas>
Здесь два обязательных атрибута - width и height, которые обозначают длину и высоту области рисования соответственно. Если они не указаны, то по умолчанию длина будет равно 300 пикселей, а высота 150 пикселей. Важно заметить, что этот тег обязательно должен закрываться. т.е. должен выглядеть так:
<canvas ...></canvas> ,
но никак не
<canvas ... /> .
Иногда рисунок нужно заключить в рамку. Для этого можно использовать фтрибут style. Например
style='border:1px solid' style='border:1px solid'
Тег <canvas> это элемент HTML, но работать с ним можно используя код javascript. Как сделать это показано в следующем примере:
//Сначала нужно получить объект canvas
var canvas = document.getElementById('example');//example это id тега
//потом нужно получить контекст, т.е. информацию об объекте canvas
var ctx = canvas.getContext('2d');
Не все браузеры поддерживают HTML5. Поэтому рассмотрим как проверить поддержку Canvas API средствами JavaScript:
var canvas = document.getElementById('example');
If (canvas.GetContext){
var context = canvas.getContext('2d');
// здесь размещается код рисования на canvas
}else{
// здесь размещается код, который обрабатывается если браузер не поддерживает Canvas API
}
В дальнейшем будем предполагать, что используемый браузер поддерживает элемент canavas