logo标签列表

在HTML5和画布中制作动画图片

javascriptimagehtmlanimationcanvas
3

我需要帮助在HTML5和JavaScript中将图像浮动到画布上。我已经进行了谷歌搜索，但没有找到任何内容。我可以在屏幕上绘制形状，但不知道如何使它们动起来。 我想让几个不同的图像从不同的方向漂浮到画布上。 有人能帮我吗？在谷歌搜索了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>

看起来有很多有关动画形状的教程，但我想加载自己的图片并让它们飞入画布。

请查看MDN关于变换的内容。它包含了你需要的一切。 - Florian Margaine
@FlorianMargaine，该链接现在已经失效。 - oldboy
3个回答
13

尝试这个画布动画的非常基本的演示：

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
要使用canvas进行动画制作，您需要记录对象的位置并在新帧上增加它。 setInterval(draw, 1000 / 25); 允许您在指定的时间间隔后运行一个函数。您可以使用此函数来更新对象在页面上的位置，每次渲染新帧时都会更新。
例如： function draw() { playersShip.move(); } 其中move函数增加或减少对象的x和/或y坐标。这条线在指定的坐标处绘制指定的图像（每个帧被渲染时更新）。 ctx.drawImage(shipImage, playersShip.position.x, playersShip.position.y); 如果您正在构建游戏或类似物品，最好将对象的移动与帧速率隔离开来。如果您需要更深入的示例，我可以提供更多内容。
使用这个想法，您应该能够创建您的图像动画。
一个人如何将移动与帧率分离？ - oldboy
2
这是一个在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

以下链接无法使用，创建了一个CodePen链接在这里：https://codepen.io/arlevi/pen/vYrXPXw - Ricky Levi
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接