Кафедра ИС 1 «Информационно управляющие системы»

 

Экз.№__

 

 

УТВЕРЖДАЮ

Заведующий кафедрой___

 

_________ (Ивченко В.Д.)

«___»_________2012г.

 

 

Только для студентов по

специальности 220201

 

 

МЕТОДИЧЕСКИЕ УКАЗАНИЯ

ПО ВЫПОЛНЕНИЮ ЛАБОРАТОРНОГО ПРАКТИКУМА

" Основы программирования"

 

Обсуждены на заседании кафедры

(предметно-методической секции)

«__»___________2012г.

Протокол № __

 

МГУПИ – 2012г.

Лабораторная работа №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

Рисование прямоугольников

Метод	Описание
fillRect(x, y, ширина, высота)	Рисует закрашенный прямоугольник. x, y- координаты левого верхнего угла
strokeRect(x, y, ширина, высота)	Рисует не закрашенный прямоугольник.
clearRect(x, y, ширина, высота)	Очищает указанную зону делая ее полностью прозрачной.

Обратите внимание: параметры x и y задают величину смещения прямоугольника по горизонтали (x) и вертикали (y) от верхнего левого угла холста в пикселях.

< 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.fillRect(50, 40, 55, 55);

x.strokeRect(150, 70, 55, 55);

x.clearRect(68, 57, 20, 20);

< /script>

< /body>

< /html>

Объяснение примера:

1. var canvas=document.getElementById(" draw" ) - находим нужный холст;
2. var x=canvas.getContext(" 2d" ) - обращаемся ко встроенному объекту, который содержит различные методы для рисования (первые два шага являются стандартными для рисования любого объекта в canvas);
3. x.fillRect(50, 40, 55, 55) - рисуем закрашенный прямоугольник;
4. x.strokeRect(150, 70, 55, 55) - рисуем не закрашенный прямоугольник;
5. x.clearRect(68, 57, 20, 20) - очищаем зону в закрашенном прямоугольнике

 

 

 

Рисование составных фигур

Составные фигуры состоят из нескольких соединенных простых объектов (таких как линии, круги и т.д.)

Методы	Описание
moveTo(x, y)	Устанавливает координаты точки, из которой начнется рисование следующего объекта.
lineTo(x, y)	Рисует прямую линию.
arc(x, y, радиус, нач_угол, конеч_угол)	Рисует круг. Угол необходимо задавать в радианах, а не в градусах (радианы=(Math.PI/180)*градусы).
rect(x, y, ширина, высота)	Рисует прямоугольник.

Код программы рисования заключается в «логические скобки» состоящие из функций beginPath(); и closePath();

Структура программы выглядит следующим образом

beginPath(); //Начало рисования/* Простые объекты помещаются здесь */closePath(); // Автоматически завершает фигуру (соединяет конечную точку с начальной) //Теперь необходимо вызвать один из методов для рисования фигуры определенной вышеstroke(); //нарисует фигуру не закрашеннойfill(); //нарисует фигуру закрашенной

Пример рисования треугольника

< html>

< body>

< canvas id='draw' style='border: 1px solid' width='300' height='200'> < /canvas>

< script type='text/javascript'>

var canvas=document.getElementById(" draw" )

var x=canvas.getContext(" 2d" );

X.beginPath(); //Начало рисования

X.moveTo(20, 20); // координаты точки, из которой начнется рисование

X.lineTo(70, 70); // Рисует прямую линию.

x.lineTo(20, 70);

X.closePath(); //Конец рисования

X.fill(); //закрашивание

< /script>

< /body>

< /html>

Другой пример – рисование дуги

var context = canvas.getContext(" 2d" );

var x = canvas.width / 2;

var y = canvas.height / 2;

var radius = 75;

var startAngle = 1.1 * Math.PI;

var endAngle = 1.9 * Math.PI;

var counterClockwise = false;

context.beginPath();

context.arc(x, y, radius, startAngle, endAngle, counterClockwise);

context.lineWidth = 15;

context.strokeStyle = " black";

12345Следующая ⇒

Поделиться: