在html画布中显示图像然后增大尺寸

时间:2015-03-04 18:07:14

标签: javascript html html5 animation html5-canvas

我想知道是否有可能使用各种线条和bez曲线创建一个图像,然后沿着画布向下移动并随着它的增长而变大。有问题的动画要求房间充满气体,因此当它在画布周围移动时,气体会越来越大。

我曾想过只绘制图像然后使用for循环将图像向下移动直到某个y坐标,但这对创建图像的增加部分没有帮助

任何帮助表示赞赏

1 个答案:

答案 0 :(得分:1)

有不同的方法可以让动画发生。我通常为我的帆布游戏做的是,我有一个游戏循环,循环在我在项目开始时决定的某个FPS。每个动画通常由时间和速度控制。

var fps = 60;
var lastUpdateTime = +new Date(); //when did I last update the game?

function gameloop() {
    var updateStartTime = +new Date();
    update(updateStartTime-lastUpdateTime); //update the game for the according to the elapsed time since last update
    lastUpdateTime = updateStartTime;

    //Normally I also handle spawning stuff here
    //I also remove old object in my gameloop

    setTimeout(gameloop,1000/fps)
}

function update(elapsedTime) {
    //This function update the locations of game elements such as player position, bullets, enemies, bananas etc. (or even gas clouds!)
    //When I change a value, I use the time-parameter passed along with the call so that I get a smooth game even though the browser might lag.
    playerX += velocity*timeElapsed; //as an example
}

这是一个关于你的问题的例子,我做了一个创建气泡对象的功能(是的,我知道使用气体气泡 = P有多么错误)。这些物体向下移动(物理?!)并且尺寸增大(好的,这开始变得越来越疯狂),只是看看:

http://jsfiddle.net/Niddro/ppa4xuw8/