HTML5 Canvas - 팝콘 애니메이션/임의 이미지 팝?

Question

어쩌면 나는 틀린 질문을 완전히 요구하고있다. 나는 꽤 많이 읽었으며 꽤 많은 HTML 5 기능을 보았습니다. 그러나 아직 앉아서 실제로 활용할 시간이 없었습니다. (그러나 곧 바랄 수 있습니다.)

어쨌든 HTML5를 사용하여 다음 작업을 수행 할 수 있는지 궁금했습니다. 문제가 해결되지 않는 경우는. 또는, 다음 어떻게 작동 할 수 있습니까?

내가 (이다 터진 팝콘 1 개) 팝콘의 이미지를 가지고있다.

나는 캔버스를 만들고 싶었과에 버튼을 클릭하고이 이미지 체인을 캔버스 위에 무작위로 "튀어 오르게"시작하고 천천히 처음에는 정지 지점이 될 때까지 속도를 얻으십시오

팝콘을 터뜨린 사람은 누구나 내가 여기에서 원하는 것을 이해할 수 있습니다.

쉽게 할 수 있습니까?

Answer 1

나는 팝콘을 터뜨렸고, 네가 할 수있어. 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(); 

};