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

};