Файл: Беляев С А - Разработка игр на языке JavaScript - 2016.pdf
Добавлен: 25.10.2018
Просмотров: 6977
Скачиваний: 115
16
Глава 1
<!DOCTYPE html>
<html>
<body>
<canvas id="canvasId" width="300" height="100"
style="border:1px solid magenta;"></canvas>
<div id="result"></div>
<script>
var canvas = document.getElementById("canvasId");
var ctx = canvas.getContext("2d");
ctx.lineWidth = 5; // Óñòàíîâèòü øèðèíó ëèíèè
function square(obj) {
ctx.strokeStyle = obj.color; // Óñòàíîâèòü öâåò ëèíèè - color
ctx.strokeRect(obj.x, 10, obj.side, obj.side); // Ðèñóåì
// êâàäðàò
ctx.stroke(); // Íàðèñîâàòü
}
var s = {side:15, x:10, color:'red'}; // Ñîçäàíèå îáúåêòà
square(s); // Èñïîëüçîâàíèå îáúåêòà
square({side:25, x:50, color:'green'}); // Ñîçäàíèå è
// èñïîëüçîâàíèå îáúåêòà
square({"side":35, "x":110, "color":'blue'});
square(Object.create({side:45, x:180, color:'brown'}));
// Ïåðå÷èñëåííûå ñïîñîáû ñîçäàíèÿ îáúåêòîâ èäåíòè÷íû
</script>
</body>
</html>
В данном примере в функцию передается объект (obj),
в котором есть поля цвета (color), координаты по горизон
тали (x), размера (side). Создание объекта выглядит сле
дующим образом:
var s = {side:15, x:10, color:'red'};
Обращение к полям при этом будет выглядеть так:
s.side (получение значения поля side), s.color (получение
значения поля color) и т. д. В JavaScript поддерживается
обращение к полям, как к элементам массива, например,
s["side"] или s['color']. В следующей строке осуществля
ется вызов функции:
square(s);
Базовые элементы языка
17
Важно, что внутри функции передаваемый объект на
зывается obj, т. е. все равно как он назывался вне функ
ции, возможно у него вообще не было имени, как, напри
мер, в данной строке:
square({side:25, x:50, color:'green'});
Отличие JavaScript от многих других языков програм
мирования заключается в том, что при необходимости в
объект могут добавляться новые поля. Например, можно
записать значение в новое поле:
s.lineWidth = 14;
При этом в объекте появится новое поле lineWidth.
Имена полей могут быть записаны в двойных кавыч
ках. Такой вариант записи используется, если объект за
гружается из внешнего файла:
square({"side":35, "x":110, "color":'blue'});
Для создания объекта можно воспользоваться функ
цией create встроенного объекта Object. Все перечислен
ные способы создания объекта идентичны.
1.5.
ОТОБРАЖЕНИЕ РИСУНКОВ,
ПРОСТЕЙШАЯ АНИМАЦИЯ
Кроме создания рисунков на холсте также бывает не
обходимо отображать готовые рисунки.
<!DOCTYPE html>
<html>
<body>
<canvas id="canvasId" width="300" height="100"
style="border:2px dotted #336688;"></canvas>
<div id="result"></div>
<script>
var canvas = document.getElementById("canvasId");
var ctx = canvas.getContext("2d");
</script>
<script src="image.js"></script>
</body>
</html>
18
Глава 1
В данном примере кроме того, что изменен стиль гра
ницы — точками (dotted), толщиной 2 пиксела (2px), —
часть JavaScript вынесена в отдельный файл (image.js).
Пример подключения файла:
<script src="image.js"></script>
При этом в подключаемом файле будут доступны все
переменные, объявленные в подключающей HTMLстра
нице.
var image = new Image(); // Ñîçäàíèå îáúåêòà èçîáðàæåíèÿ
image.onload = function () { // Ñîõðàíåíèå ññûëêè íà ôóíêöèþ
ctx.drawImage(image, 10, 10, 80, 80); // Ïðîðèñîâêà èçîáðàæåíèÿ
};
image.src = "smile.jpg"; // Óêàçàíèå àäðåñà èçîáðàæåíèÿ
Для корректной работы приведенный текст JavaScript
должен быть записан в файл image.js, а файл должен на
ходиться в той же папке, что и исходная HTMLстраница.
В первой строчке создается переменная для хранения
изображения:
var image = new Image();
Во второй строчке указывается функция (onload), кото
рая будет вызвана после загрузки изображения в браузер.
У функции не указывается имя, границы функции ограни
чены фигурными скобками. В данном примере в функции
вызывается прорисовка изображения drawImage, которая
принимает несколько параметров: переменную, храня
щую изображение, координаты (x, y), где его необходимо
отобразить, и новые размеры изображения (width, height):
ctx.drawImage(image, 10, 10, 80, 80);
Функция onload вызывается в асинхронном режиме,
т. е. она вызывается только тогда, когда изображение бу
дет загружено в браузер. Соответственно, после присваи
вания функции onload значения осуществляется испол
нение следующей команды:
image.src = "c.jpg";
Именно после указания адреса начинается загрузка
изображения в браузер (рис. 1.6).
Базовые элементы языка
19
Для создания анимации достаточно изменить код в
image.js:
var image = new Image(); // Ñîçäàíèå îáúåêòà èçîáðàæåíèÿ
image.onload = function () { // Ñîõðàíåíèå ññûëêè íà ôóíêöèþ
setInterval(move, 100); // Ñîçäàíèå èíòåðâàëà â 100 ìñåê äëÿ
çàïóñêà move
};
// Óêàçàíèå àäðåñà èçîáðàæåíèÿ
image.src = 'http://media.tumblr.com/smile.jpg';
var x = 10; // Êîîðäèíàòà x èçîáðàæåíèÿ
function move() { // Ôóíêöèÿ, âûçûâàåìàÿ ïî òàéìåðó
if(x < 200) x += 5; else x = 10; // Èçìåíåíèå êîîðäèíàòû x
ctx.clearRect(0, 0, canvas.width, canvas.height); // Î÷èñòèòü õîëñò
ctx.drawImage(image, x, 10, 80, 80); // Ïðîðèñîâêà èçîáðàæåíèÿ
}
Отличия данного JavaScript начинаются с функции
onload, в которой вызывается
setInterval(move, 100);
Это встроенная функция, которая создает интервал вы
зова заданной функции (move) с заданной частотой (100).
Частота задается в миллисекундах.
В данном примере движение предусмотрено по гори
зонтали, поэтому создана переменная x, в которую сохра
нено начальное значение 10 пикселов. Создана функция
move, в ее первой строчке записано условие (if), проверя
ющее максимальное значение x (не более 200), если значе
ние меньше, то выражение «x += 5;» обеспечивает увели
чение x на 5 при каждом вызове функции move, иначе в x
записывается начальное значение 10.
Рис. 1.6
Отображение изображения в canvas
20
Глава 1
Следующая строчка вызывает функцию clearRect(x,
y, width, height), которая обеспечивает очистку canvas.
И уже известная фунция drawImage обеспечивает вывод
на экран рисунка в заданные координаты. В данном слу
чае координата x изменяется при каждом вызове функ
ции move.
1.6.
ТРАНСФОРМАЦИЯ ИЗОБРАЖЕНИЯ
Трансформация изображения предполагает отображе
ние его в измененной координатной сетке холста. Холст
поддерживает множество преобразований. Наиболее ча
сто используемые: поворот, изменение масштаба по одной
из координат, смещение и т. п.
var image = new Image(); // Ñîçäàíèå îáúåêòà èçîáðàæåíèÿ
image.onload = function () { // Ñîõðàíåíèå ññûëêè íà ôóíêöèþ
ctx.save(); // Ñîõðàíåíèå õàðàêòåðèñòèê õîëñòà
// Ñìåùåíèå â èñõîäíîé ñèñòåìå êîîðäèíàò
ctx.translate(40, -10);
ctx.rotate(30 * Math.PI / 180); // Ïîâîðîò íà 30 ãðàäóñîâ
ctx.scale(0.3, 0.3); // Óìåíüøåíèå äî 30%
ctx.drawImage(image, 0, 0); // Îòîáðàæåíèå
ctx.restore(); // Âîññòàíîâëåíèå õàðàêòåðèñòèê õîëñòà
// Îòîáðàæåíèå äóáëèêàòà ðèñóíêà
ctx.save(); // Ñîõðàíåíèå õàðàêòåðèñòèê õîëñòà
ctx.rotate(-30 * Math.PI / 180); // Ïîâîðîò íà -30 ãðàäóñîâ
// Ñìåùåíèå â ñèñòåìå êîîðäèíàò, ïîâåðíóòîé íà -30 ãðàäóñîâ
ctx.translate(100, 100);
ctx.scale(0.4, 0.4); // Óìåíüøåíèå äî 40%
ctx.drawImage(image, 0, 0); // Îòîáðàæåíèå
ctx.restore(); // Âîññòàíîâëåíèå õàðàêòåðèñòèê õîëñòà
};
// Óêàçàíèå àäðåñà èçîáðàæåíèÿ
image.src = 'smile.jpg';
В приведенном примере наибольший интерес представ
ляет функция, сохраняемая в onload переменной image,
именно в ней происходят преобразования изображения.
ctx.save();