带有画布的HTML5中的逐帧动画
我有一个flash动画,我正试图转换成HTML5。现在我已经取出了所有的图像。例如,在手部动画中,我拍摄了所有手部图像的图像。我已经用底图绘制了画布,但我不知道如何逐帧替换这些图像带有画布的HTML5中的逐帧动画,html,animation,canvas,html5-animation,Html,Animation,Canvas,Html5 Animation,我有一个flash动画,我正试图转换成HTML5。现在我已经取出了所有的图像。例如,在手部动画中,我拍摄了所有手部图像的图像。我已经用底图绘制了画布,但我不知道如何逐帧替换这些图像 function draw(){ var canvas = document.getElementById('canvas'); if(canvas.getContext){ // canvas animation code here: var ctx = canvas
function draw(){
var canvas = document.getElementById('canvas');
if(canvas.getContext){
// canvas animation code here:
var ctx = canvas.getContext('2d');
var lhs = new Image();
lhs.src = "images/left_hnd_1.png";
lhs.onload = function(){
ctx.drawImage(lhs, 293, 137);
}
} else {
// canvas unsupported code here:
document.getElementById('girl').style.display = "block";
}
}
现在,我有三个更多的框架,这张图片。left_hnd_2.png、left_hnd_3.png和left_hnd_4.png。我会用一个图像,但是帧之间的差异太大了,不能用一个图像来完成。我怎样才能用我想要的时差来制作动画呢
任何想法都将不胜感激。谢谢 试试这个:
var imgNumber = 1;
var lastImgNumber = 4;
var ctx = canvas.getContext('2d');
var img = new Image;
img.onload = function(){
ctx.clearRect( 0, 0, ctx.canvas.width, ctx.canvas.height );
ctx.drawImage( img, 0, 0 );
};
var timer = setInterval( function(){
if (imgNumber>lastImgNumber){
clearInterval( timer );
}else{
img.src = "images/left_hnd_"+( imgNumber++ )+".png";
}
}, 1000/15 ); //Draw at 15 frames per second
另一种方法是,如果您只有4张图像,则可以在“纹理图集”中创建一张包含所有四张图像的巨大图像,然后使用
setTimeout
或setInterval
调用drawImage()
,使用不同的参数将图像的不同子集绘制到画布上。这对我也很有效!出于某种原因,当我使用OP的开始代码时,它不起作用:function draw(){
但是当我使用时:
window.onload=function draw(){
动画在画布上播放。我还使用了大约150个带有Alpha通道的PNG图像,因此这是一种将“视频”或创建合成物带到iPad/iPhone的好方法。我确认它在iPad iOS 4.3上确实有效。此解决方案效果很好。问题:当我在画布上绘制多个图像时,我会得到层叠效果。我知道我有62个图像文件,所以合并到一个文件不是最好的方法。用你的代码,清除画布、重新绘制等的最佳方法是什么?我编辑了我的答案,添加了一行在绘制前清除画布所需的内容。(您可以通过缓存画布宽度/高度使其更快,或者如果两者相同,则使用img宽度/高度。)这很好,但是,在播放动画之前,图像必须完全缓存。因此,它不会在第一次加载时播放。只能在重新加载时播放。我想问一个问题来帮助解决这个问题。你不应该强加15帧/秒的预定义帧速率或任何值。相反,让浏览器决定需要多长时间重新绘制每个帧帧,通过使用@JoseRuiSantos,如果您有帧速率独立的动画,并且希望它尽可能快地绘制,则是正确的。如果您想要较慢的动画,例如,如果您正在将固定帧速率的帧序列从Flash转换为HTML5画布,则可以尝试控制帧速率。