在html画布中显示一个图像，然后增大其大小

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

本文关键字：图像 然后 一个 布中 html 显示      更新时间：2023-09-26

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

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

感谢的任何帮助

制作动画有不同的方法。我通常为我的画布游戏做的是，我有一个游戏循环，以我在项目开始时决定的特定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/

相关文章：