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帆布 - 爆米花動畫/隨機圖像？

回答

相關問題