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

};

HTML5 Canvas - 弹出爆米花动画/随机图像？

1 个答案: