В този кратък урок ще ви покажа как да раздвижите картинка, която ползвате за заден фон в canvas и така да създадете усещане за движение. За този случай, аз ще ползвам следната картинка с размери 1920×350
Canvas елемента ще ми бъде с размери 650х350.
1. В HTML файла напишете canvas – а
|
|
<canvas id="game-field" width="650" height="350"></canvas> |
2. Във вашия JavaScript файл направете променлива, която да вземе id-то на canvas – а и създайте обект за картинката, която ще ползвате. Задайте и пътя до картинката.
|
|
var canvasField = document.getElementById("game-field"); var ctx = canvasField.getContext("2d"); var imgSprite = new Image(); imgSprite.src = 'img/sprite.png'; |
3. Следва да си направим една променлива, която да отговаря за нашите фреймове в анимациите.
|
|
var requestAnimFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000/ 60); }; |
window.requestAnimationFrame ще възпроизведе възможно най-плавната анимация за секунда време. Поддържа от повечето нови браузъри, но за всеки случай напишете за всеки браузър prefix – а.В случай, че някой браузър въобще не поддържа requestAnimationFrame, тогава анимацията ще се изпълни със setTimeout и 60 фрейма в секунда.
4. Следва да направим един клас, който да чертае картинката. Той ще има пропъртита за картинката като позиции в канваса и размери. Също така ще ни е нужен и един метод за изчертаването на картинката в канваса.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
// Leyarbackground class function LeyarBackground(source, sx, sy, sw, sh, dx, dy, dw, dh) { this.source = source; this.sx = sx; this.sy = sy; this.sw = sw; this.sh = sh; this.dx = dx; this.dy = dy; this.dw = dw; this.dh = dh; }; LeyarBackground.prototype.draw = function (ctx) { ctx.drawImage(this.source, this.sx, this.sy, this.sw, this.sh, this.dx, this.dy, this.dw, this.dh); }; |
5. След това ще създадем 2 обекта, които ще са инстанция на класа LeyarBackground и ще ги позиционираме един след друг по дължина.
|
|
var leyar_1Backgound1 = new LeyarBackground(imgSprite, 0, 0, 1920, 350, 0, 0, 1920, 350); var leyar_1Backgound2 = new LeyarBackground(imgSprite, 0, 0, 1920, 350, 1920, 0, 1920, 350); |
Може да ви се сторят малко объркващи всичките тези числа, но един път като схванете кое какво прави лесно ще се ориентирате.
Ето, всъщност накратко кое какво прави
|
|
// var leyar_1Backgound1 = new LeyarBackground(img, sx, sy, sw, sh, dx, dy, dw, dh); // img - сорса на картинката която ще зареждаме // sx - x координатата от къде да започне изрязване на картинката (ако ни трябва такова в случая не ни трябва) // sy - y координатата от къде да започне изрязване на картинката // sw - колко да е дължината на изрязаното парче почващо от sx координатата // sh - колко да е височината на изрязаното парче почващо от sy координатата // dx - къде да е x координатата в канваса от където да започне изчертаването // dy - къде да е y координатата в канваса от където да започне изчертаването // dw - каква е дължината на картинката която ще се изчертава // dh - каква е височината на картинката която ще се изчертава |
За по-подробна информация прочетете тук – http://docs.webplatform.org/wiki/concepts/programming/drawing_images_onto_canvas
6. Сега ни трябват вече няколко функции, с които да задвижим всичко това
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
function moveBackground() { leyar_1Backgound1.dx -= 1; leyar_1Backgound2.dx -= 1; if (leyar_1Backgound1.dx <= -1920) { leyar_1Backgound1.dx = 1920; } else if (leyar_1Backgound2.dx <= -1920) { leyar_1Backgound2.dx = 1920; } leyar_1Backgound1.draw(ctx); leyar_1Backgound2.draw(ctx); } function loop() { ctx.clearRect(0, 0, 650, 350); moveBackground(); requestAnimFrame(loop); } function init() { loop(); } window.addEventListener("load", init, false); |
Ще обясня от долу на горе. Най-напред ще сложим един addEventListener на window обекта, с който да задвижим нещата и да почнем да изпълняваме функцията loop, която ще върти нашата анимация като се извиква непрекъснато с requestAnimFrame.
Преди всеки следващ фрейм трябва да чистим сцената, за да се показват единствено новите позиции на обектите.
Ако не ги чистим с всяка една нова итерация ще виждаме всичко, което е изчертано от предишния фрейм. За да направим това ни трябва следния код.
|
|
ctx.clearRect(0, 0, 650, 350); |
0, 0 са x и y координатите от къде да започва изчистването, 650 и 350 са width и height колко да е изчисти на сцената. в случая искаме цялата сцена.
След това идва частта, в която искаме да движим двата background обекта с функцията moveBackgound.
След като имаме следните стартови позиции на leyar_1Backgound1(dx = 0) и leyar_1Backgound2(dx = 1920) се получава следното. Двата се движат еднакво наляво със скорост 1px
|
|
leyar_1Backgound1.dx -= 1; leyar_1Backgound2.dx -= 1; |
и тук вече имаме 2 условия, в които казваме, че ако leyar_1Backgound1.dx стигне -1920 тръгвайки от 0 то нека се върне на dx позицията, която беше стартова за втория background която е 1920. И след това понеже вървят един след друг втория background ще стигне и той – 1920px и тогава и той да се върне на изходна позиция 1920.
|
|
if (leyar_1Backgound1.dx <= -1920) { leyar_1Backgound1.dx = 1920; } else if (leyar_1Backgound2.dx <= -1920) { leyar_1Backgound2.dx = 1920; } |
И накрая викаме метода draw на класа LeyarBackground, за да изчертаем картинките.
|
|
leyar_1Backgound1.draw(ctx); leyar_1Backgound2.draw(ctx); |
По този начин можете да повтаряте движението постоянно и да създаде усещане за движение.
Демо на урока можете да видите тук
