Question

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

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

任何帮助表示赞赏

Answer 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/

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

1 个答案: