Анимация изображений в HTML5 и холсте - PullRequest
Новая
       0

Анимация изображений в HTML5 и холсте

2 голосов
/ 20 марта 2012

Мне нужна помощь в создании плавающего изображения на холсте в HTML5 и JavaScript.Я гуглил вокруг и ничего не нашел.Я могу рисовать фигуры на экране, но я не знаю, как их анимировать.Я хочу, чтобы несколько разных изображений плавали на холсте с разных сторон.Может кто-нибудь, пожалуйста, помогите мне с этим?после 4 часов поиска в Google все, что я мог сделать, это 

<script type = "Text/JavaScript">
                function Animate(){
                var canvas=document.getElementById("myCanvas"); 
                var ctx=canvas.getContext("2d"); 

                var img = new Image();

                img.onload = function ()
                {
                    ctx.drawImage(img,20,20,300,300);

                };
                img.src = "vb.png";
                }
             </script> 
    </head> 
<body> 
<canvas id="myCanvas" height="200" width="800"></canvas>
<br><button onclick="Animate();">Restart</button>

Кажется, есть много уроков по анимации форм, но я хочу загрузить свои собственные картинки и заставить их летать на холст.

Ответы [ 3 ]

12 голосов
/ 20 марта 2012

Попробуйте это очень базовая демонстрация анимации холста:

http://jsfiddle.net/bDQ6b/2/

window.addEventListener('load', function () {
  var
    img = new Image,
    ctx = document.getElementById('myCanvas').getContext('2d');

  img.src = 'http://www.gravatar.com/avatar/a1f80339c0cef95be6dc73e0ac510d5d?s=32&d=identicon&r=PG';
  img.addEventListener('load', function () {

    var interval = setInterval(function() {
      var x = 0, y = 0;

      return function () {
        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
        ctx.drawImage(img, x, y);

        x += 1;
        if (x > ctx.canvas.width) {
          x = 0;
        }
      };
    }(), 1000/40);
  }, false);
}, false);

Есть много вещей, которые можно сделать лучше, хотя,Например:

  • с использованием requestAnimationFrame вместо интервала

  • предварительной загрузки изображений более удобным способом

  • с использованием скоростей и временных разностей (от последнего к текущему кадру) вместо фиксированных приращений

  • и многих других

но, поскольку все это сделало бы пример слишком сложным, я оставлю все как есть и надеюсь, что вы изучите эти темы во время изучения.

2 голосов
/ 16 декабря 2014

Вот простой пример анимации отскока мяча внутри холста на холсте HTML5.

 <body>
<canvas id="Canvas01" width="400" height="400" style="border:5px solid #FF9933; margin-left:10px; margin-top:10px;"></canvas>

<script>
  var canvas = document.getElementById('Canvas01');
  var ctx = canvas.getContext('2d');
  var p = {x:25, y:25};
  var velo=6, corner=30, rad=20;
  var ball={x:p.x, y:p.y};

  var moveX=Math.cos(Math.PI/180*corner) * velo;
  var moveY=Math.sin(Math.PI/180*corner) * velo;


  function DrawMe() {
  ctx.clearRect(0,0,canvas.width, canvas.height);

  if(ball.x>canvas.width-rad || ball.x<rad) moveX=-moveX;
  if(ball.y>canvas.height-rad || ball.y<rad) moveY=-moveY;

    ball.x +=moveX;
    ball.y +=moveY;

  ctx.beginPath();
  ctx.fillStyle = 'blue';
  ctx.arc(ball.x, ball.y, rad, 0 , Math.PI*2,false);
  ctx.fill();
  ctx.closePath();
  }

  setInterval(DrawMe,30);

 </script>
</body>

Вы можете попробовать сами здесь: http://codetutorial.com/examples-canvas/canvas-examples-bounce-ball

2 голосов
/ 20 марта 2012

Для анимации с помощью canvas вам необходимо записать местоположение вашего объекта, а затем увеличить его на новом кадре. setInterval(draw, 1000 / 25); позволяет запускать функцию через заданный интервал времени. Вы можете использовать эту функцию для обновления положения вашего объекта на странице каждый раз при рендеринге нового кадра.

Например:

function draw() { playersShip.move(); }

Где функция перемещения увеличивает или уменьшает координаты x и / или y вашего объекта. Эта линия рисует указанное изображение по указанной координате (которая обновляется при рендеринге каждого кадра).

ctx.drawImage(shipImage, playersShip.position.x, playersShip.position.y);

Было бы неплохо изолировать движение ваших объектов от частоты кадров, если вы строите игру или что-то подобное. Я могу предоставить более подробные образцы, если они вам нужны.

Используя эту идею, вы сможете создавать анимацию вашего изображения.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...