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

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

→

Html & CSS

→

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

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

последнее обновление: 15 августа 2020

Картинка

перемещается вот так:

Шаг 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);
                         };
               })();
          }
     </script>

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

               // рисуем картинку по позиции x,y
               context.drawImage(loadedImages.tree, data.xPos, data.yPos);

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

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

          
          var files = {
               tree : "./tree.jpg"
          };

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

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

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

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

     </script>
</body>

</html>

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

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

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

← Предыдущая тема
Анимация человечка в движении (sprite). Используем HTML элементы <div>, <img>. Для анимации используем CSS стили: "animation", "background-image", "background-position", "keyframes"

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