Javascript 在HTML5和画布中设置图像动画
我需要帮助以HTML5和JavaScript将图像浮动到画布上。我一直在谷歌搜索，什么也没找到。我可以在屏幕上画形状，但我不知道如何制作动画。 我想要两个不同的图像从不同的方向漂浮在画布上。 有人能帮我吗？在谷歌搜索了4个小时后，我所能做的就是这样Javascript 在HTML5和画布中设置图像动画,javascript,image,html,animation,canvas,Javascript,Image,Html,Animation,Canvas,我需要帮助以HTML5和JavaScript将图像浮动到画布上。我一直在谷歌搜索，什么也没找到。我可以在屏幕上画形状，但我不知道如何制作动画。 我想要两个不同的图像从不同的方向漂浮在画布上。 有人能帮我吗？在谷歌搜索了4个小时后，我所能做的就是这样 <script type = "Text/JavaScript"> function Animate(){ var canvas=document.getElementByI
<script type = "Text/JavaScript">
function Animate(){
var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
var img = new Image();
img.onload = function ()
{
ctx.drawImage(img,20,20,300,300);
};
img.src = "vb.png";
}
</script>
</head>
<body>
<canvas id="myCanvas" height="200" width="800"></canvas>
<br><button onclick="Animate();">Restart</button>
函数Animate（）{
var canvas=document.getElementById（“myCanvas”）；
var ctx=canvas.getContext（“2d”）；
var img=新图像（）；
img.onload=函数（）
{
ctx.drawImage（img，20,20300300）；
};
img.src=“vb.png”；
}
重新启动
似乎有很多关于形状动画的教程，但我想加载我自己的图片，让它们飞到画布上。试试这个非常画布动画的基本演示：
不过，还有很多事情可以做得更好。例如：
- 使用而不是间隔
- 以更方便的方式预加载图像
- 使用速度和时间差（从最后一帧到当前帧）而不是固定增量
- 还有更多
但是，由于所有这些都会使示例变得过于复杂，我将保持原样，希望您在学习过程中仔细阅读这些主题。要使用画布制作动画，您需要记录对象的位置，然后在新帧
setInterval（draw，1000/25）上增加它允许您在指定的时间间隔后运行函数。可以使用此函数在每次渲染新帧时更新对象在页面上的位置
例如：
函数draw（）{playership.move（）；}
其中，“移动”函数增加或减少对象的x和/或y坐标。这条线在指定的坐标（渲染每个帧时更新）处绘制指定图像的坐标
ctx.drawImage（shipImage，playersShip.position.x，playersShip.position.y）
如果你正在制作一个游戏或类似的游戏，最好将你的物体的运动与你的帧速率隔离开来。如果你需要，我可以提供更深入的样品
使用此想法，您应该能够创建图像的动画。以下是HTML5画布上画布内弹跳球动画的简单示例
<body>
<canvas id="Canvas01" width="400" height="400" style="border:5px solid #FF9933; margin-left:10px; margin-top:10px;"></canvas>
<script>
var canvas = document.getElementById('Canvas01');
var ctx = canvas.getContext('2d');
var p = {x:25, y:25};
var velo=6, corner=30, rad=20;
var ball={x:p.x, y:p.y};
var moveX=Math.cos(Math.PI/180*corner) * velo;
var moveY=Math.sin(Math.PI/180*corner) * velo;
function DrawMe() {
ctx.clearRect(0,0,canvas.width, canvas.height);
if(ball.x>canvas.width-rad || ball.x<rad) moveX=-moveX;
if(ball.y>canvas.height-rad || ball.y<rad) moveY=-moveY;
ball.x +=moveX;
ball.y +=moveY;
ctx.beginPath();
ctx.fillStyle = 'blue';
ctx.arc(ball.x, ball.y, rad, 0 , Math.PI*2,false);
ctx.fill();
ctx.closePath();
}
setInterval(DrawMe,30);
</script>
</body>
var canvas=document.getElementById（'Canvas01'）；
var ctx=canvas.getContext（'2d'）；
var p={x:25，y:25}；
可变速度=6，转角=30，弧度=20；
var-ball={x:p.x，y:p.y}；
var moveX=数学cos（数学PI/180*角）*velo；
var moveY=Math.sin（Math.PI/180*角）*velo；
函数DrawMe（）{
ctx.clearRect（0,0，canvas.width，canvas.height）；
如果（ball.x>canvas.width-rad | | | ball.xcanvas.height-rad | | | | ball.y看一看。它有你需要的一切。@FlorianMargaine链接现在断开了。如何将运动与fps隔离？
<body>
<canvas id="Canvas01" width="400" height="400" style="border:5px solid #FF9933; margin-left:10px; margin-top:10px;"></canvas>
<script>
var canvas = document.getElementById('Canvas01');
var ctx = canvas.getContext('2d');
var p = {x:25, y:25};
var velo=6, corner=30, rad=20;
var ball={x:p.x, y:p.y};
var moveX=Math.cos(Math.PI/180*corner) * velo;
var moveY=Math.sin(Math.PI/180*corner) * velo;
function DrawMe() {
ctx.clearRect(0,0,canvas.width, canvas.height);
if(ball.x>canvas.width-rad || ball.x<rad) moveX=-moveX;
if(ball.y>canvas.height-rad || ball.y<rad) moveY=-moveY;
ball.x +=moveX;
ball.y +=moveY;
ctx.beginPath();
ctx.fillStyle = 'blue';
ctx.arc(ball.x, ball.y, rad, 0 , Math.PI*2,false);
ctx.fill();
ctx.closePath();
}
setInterval(DrawMe,30);
</script>
</body>