在HTML5和画布中动画图像

Question

I need help with making an image float onto the canvas in HTML5 and JavaScript. 我需要帮助在HTML5和JavaScript中将图像浮动到画布上。 I have been googling around and have not found anything. 我一直在谷歌搜索，没有找到任何东西。 I can draw shapes on the screen but I dont know how to animate them. 我可以在屏幕上绘制形状，但我不知道如何动画它们。 I want couple of different images to float in on the canvas from different directions. 我想要几个不同的图像从不同的方向漂浮在画布上。 Can someone please help me with this? 有人可以帮我这个吗？ after 4 hours of googling all I could do was this 经过4个小时的谷歌搜索，我能做的就是这个

<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>

There seem to be plenty of tutorials on animating shapes but I want to load up my own pictures and have them fly in onto the canvas. 似乎有很多关于动画形状的教程，但我想加载我自己的图片并让它们飞到画布上。

Answer 1

Try this very basic demo of a canvas animation: 尝试帆布动画的这个非常基本的演示：

http://jsfiddle.net/bDQ6b/2/ 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);

There is a lot which could be done better though. 虽然有很多可以做得更好的事情。 Eg: 例如：

using requestAnimationFrame instead of an interval 使用requestAnimationFrame而不是间隔
preloading the images in a more convenient way 以更方便的方式预加载图像
using velocities and time differences (from last to current frame) instead of fixed increments 使用速度和时间差（从最后到当前帧）而不是固定增量
and many more 还有很多

but, as all this would make the example way too complicated, I'll leave it as it is and hope you'll read up on those topics while learning. 但是，由于所有这些都会使示例过于复杂，我会保持原样并希望您在学习的同时阅读这些主题。

Answer 2

Here is the simple example bounce ball animation inside the canvas on HTML5 canvas. 以下是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>

you can try it yourself here : 你可以在这里自己尝试一下： http://codetutorial.com/examples-canvas/canvas-examples-bounce-ball http://codetutorial.com/examples-canvas/canvas-examples-bounce-ball

Answer 3

To animate with canvas you need to record the location of your object and then increment it on a new frame setInterval(draw, 1000 / 25); 要使用画布动画，您需要记录对象的位置，然后在新帧setInterval(draw, 1000 / 25);上增加它setInterval(draw, 1000 / 25); allows you to run a function after a specified time interval. 允许您在指定的时间间隔后运行函数。 You could use this function to update the position of your object on the page each time a new frame is rendered. 每次渲染新帧时，您都可以使用此函数更新对象在页面上的位置。

For example: 例如：

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

Where the move function increments or decrements the x and/or y coordinate of your object. 移动函数增加或减少对象的x和/或y坐标。 This line draws a the specified image at a specified coordinate (which is updated when each frame is rendered). 此行在指定坐标处绘制指定的图像（在渲染每个帧时更新）。

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

It would be a good idea to isolate the movement of your objects from your framerate if your building a game or similar. 如果您构建游戏或类似游戏，最好将对象的移动与帧率隔离开来。 I can provide more in-depth samples if you need them. 如果您需要，我可以提供更深入的样品。

Using this idea you should be able to create the animation of your image. 使用这个想法，您应该能够创建图像的动画。

在HTML5和画布中动画图像

问题描述

3 个解决方案

解决方案1
12 已采纳 2012-03-20 17:46:23

解决方案2
2 2014-12-16 02:29:03

解决方案3
2 2012-03-20 17:47:03

在HTML5和画布中动画图像

问题描述

3 个解决方案

解决方案1 12 已采纳 2012-03-20 17:46:23

解决方案2 2 2014-12-16 02:29:03

解决方案3 2 2012-03-20 17:47:03

解决方案1
12 已采纳 2012-03-20 17:46:23

解决方案2
2 2014-12-16 02:29:03

解决方案3
2 2012-03-20 17:47:03