HTML5帆布 - 爆米花动画/随机图像？

也许我完全是在问错误的问题。我已经阅读了不少并且看到了很多HTML 5的功能;然而，我还没有时间坐下来，真的开始利用它的任何一个:(但希望很快。）HTML5帆布 - 爆米花动画/随机图像？

无论如何，我很好奇，如果我可以做以下与HTML5和如何开始实施它，或者，如果这也不行，那我怎么才能使它发挥作用？

我有一个爆米花图像（1个爆米花即是）。

我想创造一个帆布和上按钮点击，开始一个连续的图像被随机“弹”到画布上，慢慢地开始，然后增加速度，直到这个时候应该有一个停止点。

任何爆了爆米花的人都能理解我在这里要做的事情。

难道这可能吗？

2011-11-20 shelzmike

我已经弹出了爆米花，是的，你可以做到这一点。通过创建一个Image对象并设置其src属性来加载爆米花图像。使用图像的onload属性来启动动画。假设动画的持续时间为k，请使用正弦曲线sin(x/(k/π))来计算每帧显示的内核数量。

下面是做这件事的一种方式，演示在这里：http://jsfiddle.net/uyk63/8/

var IMAGE_URL = 'http://i.istockimg.com/file_thumbview_approve/959519/2/stock-photo-959519-isolated-single-popcorn.jpg'; 
var DURATION = 10 * 1000, FRAMES = 30, KERNELS = 10; 

var canvas = document.getElementById('canvas'); 
var ctx = canvas.getContext('2d'); 

var frame = 0, 
    start = new Date().getTime(), 
    image = new Image; 
image.src = IMAGE_URL; 
image.onload = function() { 

    function pop() { 
     ctx.drawImage(image, 
      Math.floor(Math.random() * canvas.width), 
      Math.floor(Math.random() * canvas.height), 
      100, 50); 
    } 

    // A little overcomplicated. You could probably do this in a single loop. 
    // (It's late and I'm tired, though. Sorry.) 
    function animate() { 
     var i, delay, 
      count = Math.floor(Math.sin(frame/(FRAMES/Math.PI)) * KERNELS); 
     for (i = 0; i < count; i++) { 
      delay = (DURATION/FRAMES)/count * i; 
      setTimeout(pop, delay); 
     } 
     if (++frame < FRAMES) { 
      setTimeout(animate, DURATION/FRAMES); 
     } 
    } 
    animate(); 

};

来源

2011-11-22 07:07:39

HTML5帆布 - 爆米花动画/随机图像？

回答

相关问题