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

Programming, development, testing

→

Html & CSS

→

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

Looked at 4622 times

last updated: 15 Augusta 2020

Picture

moves like this:

Step 1. Let's create a new file 1.html

Html Let's write the code in the file 1.html

<html>


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


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

     
     <script>

          // we upload pictures from files
          function loadImages(files, callbackAllFilesLoaded)
          {
               // count the number of files
               var countFilesToLoad = 0;
               for (var fileId in files)
               {
                    countFilesToLoad++;
               }

               var images = {};
               for (var fileId in files)
               {
                    // create a blank picture
                    images[fileId] = new Image();

                    // event onload
                    images[fileId].onload = function()
                    {
                         // when all the files are loaded, call our function callbackAllFilesLoaded to draw a picture
                         if ( --countFilesToLoad <= 0 )
                         {
                              callbackAllFilesLoaded(images);
                         }
                    };

                    // uploading a picture
                    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);

               // draw a picture by position x,y
               context.drawImage(loadedImages.tree, data.xPos, data.yPos);

               // change the position of the picture
               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>

Step 2. Download the picture

tree.jpg the picture must be in the same folder as the file 1.html

Step 3. Run the file in the browser 1.html

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

Next topic →
Drawing a picture with movement and animation (sprite). Используем HTML элемент <canvas>. Для движения используем JavaScript: var img = new Image(), img.src = url, drawImage, timer, window.setInterval