使图像出现，然后在 html canvas 中变大

Question

我想知道是否可以使用出现的各种线条和 bez 曲线创建图像，然后向下移动 canvas 并随着它的增长而变大。有问题的动画需要房间充满气体，因此气体在 canvas 周围移动时变得越来越大。

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

感谢任何帮助

Answer 1

制作动画的方法有很多种。我通常为我的 canvas 游戏做的是，我有一个游戏循环，它以我在项目开始时决定的某个 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
}

这里有一个关于你的问题的例子，我做了一个函数来创建气泡对象（是的，我知道使用气体 bubbles =P 是多么错误）。这些物体向下移动（物理？！）并增加尺寸（好吧，这听起来越来越疯狂），看看吧：

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

使图像出现，然后在 html canvas 中变大

Make an image appear and then grow in size in a html canvas

html

javascript

animation

html5-canvas