在HTML5和画布中动画图像

Question

在HTML5和画布中动画图像

use*_*566 2 javascript html5 animation canvas image

我需要帮助在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>

Run Code Online (Sandbox Code Playgroud)

似乎有很多关于动画形状的教程,但我想加载我自己的图片并让它们飞到画布上.

Answer 1

Yos*_*shi 12

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

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

Run Code Online (Sandbox Code Playgroud)

虽然有很多可以做得更好的事情.例如:

使用requestAnimationFrame而不是间隔
以更方便的方式预加载图像
使用速度和时间差(从最后到当前帧)而不是固定增量
还有很多

但是,由于所有这些都会使示例过于复杂,我会保持原样并希望您在学习的同时阅读这些主题.

归档时间：	13 年，7 月前
查看次数：	32100 次
最近记录：	10 年前