Рисуем картинку с движением и анимацией (sprite). Используем HTML элемент <canvas>. Для движения используем JavaScript: var img = new Image(), img.src = url, drawImage, timer, window.setInterval

Программирование, разработка, тестирование

→

JavaScript - язык программирования для HTML

→

Рисуем картинку с движением и анимацией (sprite). Используем HTML элемент <canvas>. Для движения используем JavaScript: var img = new Image(), img.src = url, drawImage, timer, window.setInterval | стандарт ES5

Посмотрели 5492 раз(а)

Картинка

перемещается с анимацией вот так:

Шаг 1. Создадим новый файл 1.html

Html Напишем код в файле 1.html

<html>


<head>
     <meta charset="utf-8">
     <title>Example</title>
</head>


<body>
     
     <canvas id="canvas1" width='400px' height='400px'></canvas>

     
     <script>

          // загружаем картинки из файлов
          function loadImages(files, callbackAllFilesLoaded)
          {
               // считаем количество файлов
               var countFilesToLoad = 0;
               for (var fileId in files)
               {
                    countFilesToLoad++;
               }

               var images = {};
               for (var fileId in files)
               {
                    // создаем пустую картинку
                    images[fileId] = new Image();

                    // событие onload
                    images[fileId].onload = function()
                    {
                         // когда все файлы загрузились, вызываем нашу функцию callbackAllFilesLoaded чтобы нарисовать картинку
                         if ( --countFilesToLoad <= 0 )
                         {
                              callbackAllFilesLoaded(images);
                         }
                    };

                    // загружаем картинку
                    images[fileId].src = files[fileId];
               }
          }

          function AnimationInit()
          {
               window.requestAnimFrame = (function(callback) {
                    return window.requestAnimationFrame ||
                         window.webkitRequestAnimationFrame ||
                         window.mozRequestAnimationFrame ||
                         window.oRequestAnimationFrame ||
                         window.msRequestAnimationFrame ||
                         function(callback)
                         {
                              window.setTimeout(callback, 1000 / 60); // 60 time in 1 second (1000 ms)
                         };
               })();
          }

     </script>

     
     <script>
          function MyAnimation(context, canvas, loadedImages, data)
          {
               
               context.clearRect(0, 0, canvas.width, canvas.height);

               // рисуем часть картинки по позиции x,y
               const rect = data.spriteOffsets[Math.trunc(data.spriteIndex) % data.spriteOffsets.length ];
               context.drawImage(loadedImages.tree, rect.x, rect.y, rect.width, rect.height, data.xPos, data.yPos, rect.width, rect.height);

               // следующий sprite индекс
               data.spriteIndex += 0.15;

               // меняем позицию картинки
               data.xPos = data.xPos>410 ? 0 : data.xPos + 1.3;

               // request new frame
               requestAnimFrame(function(){
                    MyAnimation(context, canvas, loadedImages, data);
               });
          }

          
          var files = {
               tree : "./dog_run.png"
          };

          
          var canvas = document.getElementById('canvas1');
          var context = canvas.getContext('2d');

          
          loadImages(files, function (loadedImages)
          {
               
               AnimationInit();

               
               var spriteOffsets = [
                    {x:244, y:3, width:57, height:42},
                    {x:304, y:4, width:54, height:39},
                    {x:363, y:4, width:57, height:38},
                    {x:420, y:1, width:55, height:40},
                    {x:483, y:4, width:57, height:36},
                    {x:542, y:4, width:57, height:38}
               ];

               var data = {
                    xPos: 0,
                    yPos: 20,
                    spriteIndex : 0,
                    spriteOffsets: spriteOffsets
               };

               
               MyAnimation(context, canvas, loadedImages, data);
          });

     </script>
</body>

</html>

Шаг 2. Скачиваем картинку

dog_run.png картинка должна находится в той же папке, где и файл 1.html

Шаг 3. Запускаем в браузере файл 1.html

← Предыдущая тема
Рисуем картинку с движением. Используем HTML элемент <canvas>. Для движения используем JavaScript: var img = new Image(), img.src = url, drawImage, timer, window.setInterval | стандарт ES5

Следующая тема →
Как определить устройство (планшет, компьютер, телефон) сейчас используется в JavaScript, HTML | стандарт ES5