Главная RSS Онлайн игры WarCraft Приколы Карта сайта О блоге Поиск Добавить пост Ваши посты
500 рублей помощь регистрации домена и на хосте и перенос сайта туда связь


+ Подписаться

В этой книге представлены основы по HTML 5. В ней рассказывается, как создавать свою графику и анимацию, а так же работа с мышкой и клавиатурой.

Скачать


HTML5 – графика.

0

Добавил: AlexMaster

Дата: 15.09.2016


HTML5 – графика. - в HTML 5 можно нарисовать любую графику от простых линий и примитивов до игровых уровней с мельчайшими деталями.

Чем сложнее графика в проекте, тем сложнее в итоге получается код. В html 5 есть другие варианты создания графики, чем писать код самостоятельно. Например, помимо рисования прямых, кривых линий, и примитивов существует функции для вставки готовых изображений и даже анимации игровых персонажей.
Если вам приходилось видеть изометрические мини игры. Это те игры, которые создают симуляцию трехмерного пространства и иллюзию глубины, без каких либо дорогостоящих вычислений. Целый мир изометрической игры состоит из мини картинок называемые тайлами. Тайлы объединенные вместе создают целый уровень, по которым перемещается персонаж. Это пример того, как можно взять несколько изображений и объединить их создав уровень. Для добавления изображения в холст существует специальная функция drawImage().
В следующем примере в html документе есть тэг <img id = “photo” src=”img2.jpg”>. C помощью идентификатора photo мы попробуем добавить это изображение на холст. В итоге у нас получится следующее.
Пример листинг 1.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Загрузка картинки</title>
<script>
var canvas, ctx, img;
window.onload = function()
{
canvas = document.getElementById("drawingCanvas");
ctx = canvas.getContext("2d");
img = document.getElementById("photo");
ctx.drawImage(img, 50, 50);
img.width = 100;
}
</script>
</head>
<body>
<canvas id="drawingCanvas" style="background:#444444" width="400px" height="300px"></canvas><br>
<img id="photo" src="img2.jpg">
</body>
</html>

Другой способ позволяет создать объект изображения и загрузить изображение из отдельного файла. Недостаток этого способа состоит в том, что изображение нельзя использовать вместе с drawImage пока оно полностью не загрузится.
Например:

// Создаем объект изображения
var img = new Image();
// Загружаем файл изображения
img.src = "img2.jpg";
ctx.drawImage(img, 50, 50);

Здесь проблема заключается в том, что атрибут src начинает загрузку изображения, но код продолжает исполняться, не дожидаясь, когда загрузка завершится. Чтобы избежать подобной проблемы нужно через объект img вызывать функцию onLoad. Правильный вариант будет выглядеть так.
Пример листинг 2.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Загрузка картинки</title>

<script>
var canvas, ctx, img;
window.onload = function()
{
canvas = document.getElementById("drawingCanvas");
ctx = canvas.getContext("2d");
// Создаем объект изображения
var img = new Image();
// Загружаем файл изображения
img.src = "img2.jpg";
img.onload = function()
{
ctx.drawImage(img, 50, 50);
}
}
</script>
</head>
<body>
<canvas id="drawingCanvas" style="background:#444444" width="400px" height="300px"></canvas><br>
</body>
</html>

Искажение рисунков в элементе canvas.


Если по каким либо причинам ваш рисунок в элементе canvas сжался или растянулся, то скорее всего вы установили размер холста посредством таблицы стилей. Правильно устанавливать размер холста нужно с помощью атрибутов width и height. На первый взгляд может показаться, что эти атрибуты не нужны, и тэг можно записать вот так.

<canvas id="drawingCanvas"></canvas>

а установить ширину и высоту с помощью таблицы стилей.

canvas
{
width:400px;
height:300px;
}

Но этот подход не будет работать. Дело в том, что высота и ширина, стилей и холста отличаются друг от друга. Если не указать размер холста в разметке, то размер canvas будет установлен автоматически 300px на 150px. Потом таблица стилей будет растягивать, и сжимать холст, пытаясь подогнать его к указанным в нем размерам. Разумеется, все содержимое холста так же будет сжато. Во избежание этой проблемы всегда указывайте размеры canvas в атрибутах width и height. А если нужно изменить размер холста, то используйте width и height в javascript.
Пример:

canvas.width = 400;
canvas.height = 300;

Обрезка, разрезка и изменение размеров изображение.


Функция drawImage принимает несколько необязательных параметров, которые позволяют манипулировать изображением на холсте. Например, можно изменить размер изображения, указав параметры width и height.

ctx.drawImage(img, 50, 50, 300, 200);


В данном примере размер изображения 300x200 пикселов, а координаты изображения (50,50) по x и y.
Если нужно вставить в холст только часть изображения, то функции drawImage нужно передать еще четыре дополнительных параметра.
ctx.drawImage(img, source_x, source_y, source_width, source_height, x, y, width, height);
Последние четыре параметра принимают те же самые значения, что и в предыдущем примере координаты изображения (x,y) и ширину, высоту изображения. А другие первые четыре параметра, которые идут после img, принимают следующие значения. Первые два параметра координаты (x,y), откуда будем отрезать изображение, а остальные два, сколько в пикселях по высоте и ширине нужно отрезать изображения.
Например, нам нужно обрезать картинку. Начиная с точки координат (50,50), высота и ширина обрезаемой картинки должны быть 200x100 пикселей. С помощью обрезки изображения была сделана игра на память Терминатор
Вот как это будет выглядеть.


ctx.drawImage(img, 50, 50, 200, 100, 50, 50, 200, 100);

Все материалы для этого примера можно найти в папке с исходниками.

Видеокадр.


С помощью функции drawImage можно вставлять в canvas не только картинки, но например и видеокадры. Следующий пример демонстрирует, как с помощью кнопки сделать снимок видео, и разместить его на холсте.
Для увеличения щелкните на картинке

Пример листинг 3.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas в HTML5</title>
</head>
<body>
<video id="myVideo" src="Nature.ogv" width="400" height="300" controls ></video>
<canvas id="myCanvas" width="400" height="300" style="background-color:#444444; border:1px solid #ccc;">
Ваш браузер не поддерживает Canvas
</canvas>
<div>
<button id="snap">Сделать снимок</button>
</div>
<script>
var canvas = document.getElementById("myCanvas"),
context = canvas.getContext("2d");
var video = document.getElementById("myVideo");
document.getElementById("snap").onclick = function(e)
{
context.drawImage(video, 0, 0, 400, 300);
}
</script>
</body>
</html>

Скачать исходники.

Назад

Просмотров: 223

Комментарий к этой заметки:

Добавить ваш камментарий:

Введите капчу

 

Яндекс.Метрика