VeTaL_UA
17.08.2012, 17:41
Доброго времени суток!
Продолжение статьи про рисование на холсте, в которой мы научимся использовать изображения.
Естественно рисовать на холсте примитивами очень не удобно и требует определённых трудозатрат, и результат иногода явно хромает качеством. Поэтому естественно в canvas api предусмотрено взаимодействие с изображениями. Добавление изображения условно можно разделить на два шага: создание JavaScript объекта Image, а второй и заключительный шаг это отрисовка изображения на холсте при помощи функции drawImage. Рассмотрим оба шага подробнее.
Создание нового графического объекта:
var img = new Image(); // Создание нового объекта ихображения
img.src = 'image.png'; // Путь к изображению которое необходимо
нанести на холст
Кстати в качестве источника изображения, можно указать вот такую строку в которой изображение и описанно:
imgSrc = 'data:image/gif;base64,R0lGODlhDAAMAOYAANPe5Pz//4KkutDb4szY3/b+/5u5z/3//3KWrfn//8rk8naasYGkuszY4Mbg8qG+0dzv9tXg5sTg8t/o7vP8/4iqv9ft9NPe5qfD1Mfc56O/0YKlu+Lr8M3Z4JCwxuj2/Of0+eDz9+rw9Z68z8/n8sHe8sbT3Ju6zuDv96nE1Onw9Nbh6cvX39Hq89Hq8u77/srW3tbh54Kku8ba56TD1u37/vL8/vL8/9ft9ebu8+Ps8bzM1Ymsw7XR4Nnj6Yanvsnj8qrI2Or2/NTf5tvl68vY3+r3/HqdtNji6OXt8eDz+dLc477c7bDO3t7n7d7v9s3Z4dbs9N/y98Pd6PX+/8/b4f7//+Hp7tDo8vv//+fu84GjunKWro6uxHqctOfu9P///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAACH5BAAAAAAALAAAAAAMAAwAAAe EgCJfg4RfWlo5KlpgjI2OOklWBwcBAVmXCQlXHAUFVBkGBjMUN zZOEy81IF2sXUZCH0QrDyhPGzICAkohUj4XHhoQKQsLGDgWUTF IJxUjUy0uWNIkQxE9W9gMDD9BCgpLAEBNXl5H5F40DlUDEkxc7 1wICDwlDQBQHQ0EBEUsJjswBgQCADs=';
Теперь мы перейдём к рисованию изображения на холсте. Для этого существует функция drawImage.
drawImage(image, x, y) // Где x и y это координаты левого верхнего угла изображения, а первый параметр это то изображение которое должно быть нарисовано.
Стоит отметить что загрузка изображения происходит сразу после присвоения объекту источника изображения, и если оно не загрузится полностью к моменту вызова функции отрисовки, то оно попросту не будет нарисовано на холсте. Для избежания этой ситуации используется такая конструкция:
var img = new Image(); // Новый объект
img.onload = function(){ // Событие которое будет исполнено в момент когда изображение будет полностью загружено
}
img.src = 'myImage.png'; // Путь к изображению
Вот мы наверное и дошли до момента когда можно рассмотреть элементарный пример:
<html>
<META charset='UTF8'>
<head>
<title>imgExample</title>
</head>
<body>
<canvas id='example'>Обновите браузер</canvas>
< script >
var example = document.getElementById("example");
var ctx = example.getContext('2d'); // Контекст холста
var pic = new Image(); // "Создаём" изображение
pic.src = '[Ссылки могут видеть только зарегистрированные и активированные пользователи]'; // Источник изображения
pic.onload = function() { // Событие onLoad, ждём момента пока загрузится изображение
ctx.drawImage(pic, 0, 0); // Рисуем изображение от точки с координатами 0, 0
}
</script>
</body>
</html>
Но если бы всё ограничивалось простым рисованием изображением, то отдельную статью можно было бы не писать, а ограничиться подпунктом «Изображения» в предыдущемй теме. Итак теперь мы попытаемся масштабировать изображение и для этого существует ещё один способ вызова функции drawImage:
drawImage(image, x, y, width, height) // параметры width, height меняют ширину и высоту изображения
Возьмём предыдущий пример и внесём в drawImage некоторые изменения:
ctx.drawImage(pic, 0, 0, 300, 150);
Более подробный пример мы рассмотрим чуть ниже.
Третий вызов drawImage с восемью параметрами, выглядит приблизительно так:
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
// Первый параметр указывает то, какое изображение обрабатывать
// sx, sy, sWidth, sHeight указывают параметры фрагмента на изображение-источнике
// dx, dy, dWidth, dHeight ответственны за координаты отрисовки фрагмента на холсте
Возьмём всё тот же пример и подкорректируем функцию drawImage в третий раз:
ctx.drawImage(pic, 25, 42, 85, 55, 0, 0, 170, 110);
Теперь осталось закрепить всё пройденное на практическом примере. Как и в том примере это будет небольшая карта, только не из какой-то существовавшей игры, а придуманной нами. Для того что бы он нормально работал нам необходимо будет создать в любом графическом редакторе изображение составленное из фрагментов которые нам будут нужны что бы нарисовать дорожку, домик и полянку. Вообще фрагменты карты называются тайлами, а файл в котором они все собраны в одно изображение называется тайлсетом. Вот это ([Ссылки могут видеть только зарегистрированные и активированные пользователи]) изображение я нарисовал собственноручно в программе Pinta под Ubuntu и вам настоятельно не рекомендую повторять мои грехи.
Итак, размерность будет 8 на 8 квадратных блоков шириной 32 пиксела. На карте нам необходимо будет изобразить домик и дорожку. Элементы домика нарисованы ручками, можно сказать каждый кирпичик. Траву и песок делалось путём заливки области соответствующим цветом и добавки шума. Всё, конечно, представленно очень примитивно, но показательно.
Рассмотрим с пинцетом такой кусок кода как var map = [[{x:1, y: 4}… значения x и y указывают какой элемент из картинки брать. Т.е. если исходный рисунок разбить на квадрат 32×32 то станет понятней.
И форэкзампл:
<html>
<META charset='UTF8'>
<head>
<title>imgExample</title>
</head>
<body>
<canvas id='example'>Обновите браузер</canvas>
< script >
var example = document.getElementById("example");
// Задаём контекст
var ctx = example.getContext('2d'); // Контекст холста
// Размер одной ячейки на карте
cellSize = 32;
// Размер канваса равный 8х8 клеток
example.width = 8*cellSize;
example.height = 8*cellSize;
// Карта уровня двумерным массивом
// Первая и вторая координата задаёт клетку в исходном изображении
var map =
[
[{x:1, y: 4}, {x:1, y: 4}, {x:1, y: 4}, {x:1, y: 4}, {x:1, y: 4}, {x:1, y: 4}, {x:1, y: 4}, {x:1, y: 4}], // 1ый ряд карты
[{x:1, y: 4}, {x:1, y: 1}, {x:2, y: 1}, {x:3, y: 1}, {x:1, y: 4}, {x:1, y: 4}, {x:1, y: 4}, {x:1, y: 4}], // 2ый ряд карты
[{x:1, y: 4}, {x:1, y: 2}, {x:2, y: 2}, {x:3, y: 2}, {x:1, y: 4}, {x:1, y: 3}, {x:1, y: 3}, {x:1, y: 3}], // 3ый ряд карты
[{x:1, y: 4}, {x:3, y: 4}, {x:2, y: 3}, {x:3, y: 4}, {x:1, y: 4}, {x:1, y: 3}, {x:1, y: 4}, {x:1, y: 4}], // 4ый ряд карты
[{x:1, y: 4}, {x:3, y: 4}, {x:2, y: 4}, {x:3, y: 4}, {x:1, y: 4}, {x:1, y: 3}, {x:1, y: 4}, {x:1, y: 4}], // 5ый ряд карты
[{x:1, y: 4}, {x:1, y: 4}, {x:1, y: 3}, {x:1, y: 4}, {x:1, y: 4}, {x:1, y: 3}, {x:1, y: 4}, {x:1, y: 4}], // 6ый ряд карты
[{x:1, y: 4}, {x:1, y: 4}, {x:1, y: 3}, {x:1, y: 3}, {x:1, y: 3}, {x:1, y: 3}, {x:1, y: 4}, {x:1, y: 4}], // 7ый ряд карты
[{x:1, y: 4}, {x:1, y: 4}, {x:1, y: 4}, {x:1, y: 4}, {x:1, y: 4}, {x:1, y: 4}, {x:1, y: 4}, {x:1, y: 4}] // 8ый ряд карты
];
var pic = new Image(); // "Создаём" изображение
pic.src = '[Ссылки могут видеть только зарегистрированные и активированные пользователи]'; // Источникнашего тайлсэта
pic.onload = function() { // Событие onLoad, ждём момента пока загрузится изображение
for (var j=0; j<8; j++)
for (var i=0; i<8; i++)
// перебираем все значения массива 'карта' и в зависимости от координат вырисовываем нужный нам фрагмент
ctx.drawImage(pic, (map[i][j].x-1)*cellSize, (map[i][j].y-1)*cellSize, 32, 32, j*cellSize, i*cellSize, 32, 32); // Рисуем изображение от точки с координатами 0, 0
}
</script>
</body>
</html>
Спасибо за внимание!
||||||||||||||||||||||||||||
||
|| Автор статьи: shpaker ([Ссылки могут видеть только зарегистрированные и активированные пользователи]).
|| Ссылка на оригинал ([Ссылки могут видеть только зарегистрированные и активированные пользователи]).
||
||||||||||||||||||||||||||||
Продолжение статьи про рисование на холсте, в которой мы научимся использовать изображения.
Естественно рисовать на холсте примитивами очень не удобно и требует определённых трудозатрат, и результат иногода явно хромает качеством. Поэтому естественно в canvas api предусмотрено взаимодействие с изображениями. Добавление изображения условно можно разделить на два шага: создание JavaScript объекта Image, а второй и заключительный шаг это отрисовка изображения на холсте при помощи функции drawImage. Рассмотрим оба шага подробнее.
Создание нового графического объекта:
var img = new Image(); // Создание нового объекта ихображения
img.src = 'image.png'; // Путь к изображению которое необходимо
нанести на холст
Кстати в качестве источника изображения, можно указать вот такую строку в которой изображение и описанно:
imgSrc = 'data:image/gif;base64,R0lGODlhDAAMAOYAANPe5Pz//4KkutDb4szY3/b+/5u5z/3//3KWrfn//8rk8naasYGkuszY4Mbg8qG+0dzv9tXg5sTg8t/o7vP8/4iqv9ft9NPe5qfD1Mfc56O/0YKlu+Lr8M3Z4JCwxuj2/Of0+eDz9+rw9Z68z8/n8sHe8sbT3Ju6zuDv96nE1Onw9Nbh6cvX39Hq89Hq8u77/srW3tbh54Kku8ba56TD1u37/vL8/vL8/9ft9ebu8+Ps8bzM1Ymsw7XR4Nnj6Yanvsnj8qrI2Or2/NTf5tvl68vY3+r3/HqdtNji6OXt8eDz+dLc477c7bDO3t7n7d7v9s3Z4dbs9N/y98Pd6PX+/8/b4f7//+Hp7tDo8vv//+fu84GjunKWro6uxHqctOfu9P///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAACH5BAAAAAAALAAAAAAMAAwAAAe EgCJfg4RfWlo5KlpgjI2OOklWBwcBAVmXCQlXHAUFVBkGBjMUN zZOEy81IF2sXUZCH0QrDyhPGzICAkohUj4XHhoQKQsLGDgWUTF IJxUjUy0uWNIkQxE9W9gMDD9BCgpLAEBNXl5H5F40DlUDEkxc7 1wICDwlDQBQHQ0EBEUsJjswBgQCADs=';
Теперь мы перейдём к рисованию изображения на холсте. Для этого существует функция drawImage.
drawImage(image, x, y) // Где x и y это координаты левого верхнего угла изображения, а первый параметр это то изображение которое должно быть нарисовано.
Стоит отметить что загрузка изображения происходит сразу после присвоения объекту источника изображения, и если оно не загрузится полностью к моменту вызова функции отрисовки, то оно попросту не будет нарисовано на холсте. Для избежания этой ситуации используется такая конструкция:
var img = new Image(); // Новый объект
img.onload = function(){ // Событие которое будет исполнено в момент когда изображение будет полностью загружено
}
img.src = 'myImage.png'; // Путь к изображению
Вот мы наверное и дошли до момента когда можно рассмотреть элементарный пример:
<html>
<META charset='UTF8'>
<head>
<title>imgExample</title>
</head>
<body>
<canvas id='example'>Обновите браузер</canvas>
< script >
var example = document.getElementById("example");
var ctx = example.getContext('2d'); // Контекст холста
var pic = new Image(); // "Создаём" изображение
pic.src = '[Ссылки могут видеть только зарегистрированные и активированные пользователи]'; // Источник изображения
pic.onload = function() { // Событие onLoad, ждём момента пока загрузится изображение
ctx.drawImage(pic, 0, 0); // Рисуем изображение от точки с координатами 0, 0
}
</script>
</body>
</html>
Но если бы всё ограничивалось простым рисованием изображением, то отдельную статью можно было бы не писать, а ограничиться подпунктом «Изображения» в предыдущемй теме. Итак теперь мы попытаемся масштабировать изображение и для этого существует ещё один способ вызова функции drawImage:
drawImage(image, x, y, width, height) // параметры width, height меняют ширину и высоту изображения
Возьмём предыдущий пример и внесём в drawImage некоторые изменения:
ctx.drawImage(pic, 0, 0, 300, 150);
Более подробный пример мы рассмотрим чуть ниже.
Третий вызов drawImage с восемью параметрами, выглядит приблизительно так:
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
// Первый параметр указывает то, какое изображение обрабатывать
// sx, sy, sWidth, sHeight указывают параметры фрагмента на изображение-источнике
// dx, dy, dWidth, dHeight ответственны за координаты отрисовки фрагмента на холсте
Возьмём всё тот же пример и подкорректируем функцию drawImage в третий раз:
ctx.drawImage(pic, 25, 42, 85, 55, 0, 0, 170, 110);
Теперь осталось закрепить всё пройденное на практическом примере. Как и в том примере это будет небольшая карта, только не из какой-то существовавшей игры, а придуманной нами. Для того что бы он нормально работал нам необходимо будет создать в любом графическом редакторе изображение составленное из фрагментов которые нам будут нужны что бы нарисовать дорожку, домик и полянку. Вообще фрагменты карты называются тайлами, а файл в котором они все собраны в одно изображение называется тайлсетом. Вот это ([Ссылки могут видеть только зарегистрированные и активированные пользователи]) изображение я нарисовал собственноручно в программе Pinta под Ubuntu и вам настоятельно не рекомендую повторять мои грехи.
Итак, размерность будет 8 на 8 квадратных блоков шириной 32 пиксела. На карте нам необходимо будет изобразить домик и дорожку. Элементы домика нарисованы ручками, можно сказать каждый кирпичик. Траву и песок делалось путём заливки области соответствующим цветом и добавки шума. Всё, конечно, представленно очень примитивно, но показательно.
Рассмотрим с пинцетом такой кусок кода как var map = [[{x:1, y: 4}… значения x и y указывают какой элемент из картинки брать. Т.е. если исходный рисунок разбить на квадрат 32×32 то станет понятней.
И форэкзампл:
<html>
<META charset='UTF8'>
<head>
<title>imgExample</title>
</head>
<body>
<canvas id='example'>Обновите браузер</canvas>
< script >
var example = document.getElementById("example");
// Задаём контекст
var ctx = example.getContext('2d'); // Контекст холста
// Размер одной ячейки на карте
cellSize = 32;
// Размер канваса равный 8х8 клеток
example.width = 8*cellSize;
example.height = 8*cellSize;
// Карта уровня двумерным массивом
// Первая и вторая координата задаёт клетку в исходном изображении
var map =
[
[{x:1, y: 4}, {x:1, y: 4}, {x:1, y: 4}, {x:1, y: 4}, {x:1, y: 4}, {x:1, y: 4}, {x:1, y: 4}, {x:1, y: 4}], // 1ый ряд карты
[{x:1, y: 4}, {x:1, y: 1}, {x:2, y: 1}, {x:3, y: 1}, {x:1, y: 4}, {x:1, y: 4}, {x:1, y: 4}, {x:1, y: 4}], // 2ый ряд карты
[{x:1, y: 4}, {x:1, y: 2}, {x:2, y: 2}, {x:3, y: 2}, {x:1, y: 4}, {x:1, y: 3}, {x:1, y: 3}, {x:1, y: 3}], // 3ый ряд карты
[{x:1, y: 4}, {x:3, y: 4}, {x:2, y: 3}, {x:3, y: 4}, {x:1, y: 4}, {x:1, y: 3}, {x:1, y: 4}, {x:1, y: 4}], // 4ый ряд карты
[{x:1, y: 4}, {x:3, y: 4}, {x:2, y: 4}, {x:3, y: 4}, {x:1, y: 4}, {x:1, y: 3}, {x:1, y: 4}, {x:1, y: 4}], // 5ый ряд карты
[{x:1, y: 4}, {x:1, y: 4}, {x:1, y: 3}, {x:1, y: 4}, {x:1, y: 4}, {x:1, y: 3}, {x:1, y: 4}, {x:1, y: 4}], // 6ый ряд карты
[{x:1, y: 4}, {x:1, y: 4}, {x:1, y: 3}, {x:1, y: 3}, {x:1, y: 3}, {x:1, y: 3}, {x:1, y: 4}, {x:1, y: 4}], // 7ый ряд карты
[{x:1, y: 4}, {x:1, y: 4}, {x:1, y: 4}, {x:1, y: 4}, {x:1, y: 4}, {x:1, y: 4}, {x:1, y: 4}, {x:1, y: 4}] // 8ый ряд карты
];
var pic = new Image(); // "Создаём" изображение
pic.src = '[Ссылки могут видеть только зарегистрированные и активированные пользователи]'; // Источникнашего тайлсэта
pic.onload = function() { // Событие onLoad, ждём момента пока загрузится изображение
for (var j=0; j<8; j++)
for (var i=0; i<8; i++)
// перебираем все значения массива 'карта' и в зависимости от координат вырисовываем нужный нам фрагмент
ctx.drawImage(pic, (map[i][j].x-1)*cellSize, (map[i][j].y-1)*cellSize, 32, 32, j*cellSize, i*cellSize, 32, 32); // Рисуем изображение от точки с координатами 0, 0
}
</script>
</body>
</html>
Спасибо за внимание!
||||||||||||||||||||||||||||
||
|| Автор статьи: shpaker ([Ссылки могут видеть только зарегистрированные и активированные пользователи]).
|| Ссылка на оригинал ([Ссылки могут видеть только зарегистрированные и активированные пользователи]).
||
||||||||||||||||||||||||||||