admin 管理员组文章数量: 887039
html5怎么设置逐帧动画,HTML5
我有这个帧动画,其中每个帧在每1/30s被调用。HTML5 - 逐帧动画不起作用
画布根本没有被正确清除。为什么?
下面是代码:
var canvas;
var stage;
var screen_width;
var screen_height;
var bmpAnimation;
// this is a list of keyframes for each image parameter to be animated
var beachX = new Array(102,130,140,200, 233, 211, 133, 455,222);
var beachY = new Array(52,120,240,400, 102,130,140,200, 233);
var beachRotation = new Array(102,30,140,200, 33, 211, 133, 355,222);
var beachOpacity = new Array(0, 0.5, 1, 0.3, 0.8, 0.3, 0.9, 0.3, 1);
var beachScaleX = new Array(0, 0.5, 0.7, 0.3, 0.8, 1, 0.9, 0.2, 1);
var beachScaleY = new Array(0.3, 0, 0.5, 0.7, 0.3, 0.8, 1, 0.9, 1);
var index = 0;
var beach;
var context;
var interval;
window.onload = init;
function make_beach()
{
beach = new Image();
beach.src = "beach.png"; // this can be any image that is large (at least 600 x 600 pixels)
beach.onload = function(){
context.drawImage(beach, 70,120);
}
}
function init() {
canvas = document.getElementById("myCanvas");
context = canvas.getContext('2d');
context.save();
make_beach();
interval = setInterval("tick()",33);
stage = new Stage(canvas);
}
function degreesToRadians(num) {
return num * 0.0174532925199432957;
}
function tick() {
var numberOfFrames = beachX.length;
if (index > (numberOfFrames -1)) {
clearInterval (interval); // cancel the timer
return;
}
context.restore();
context.globalAlpha = 1;
context.clearRect(0, 0, canvas.width, canvas.height);
var beachMiddleX = beach.width * 0.5;
var beachMiddleY = beach.height * 0.5;
context.translate(beachX[index] + beachMiddleX, beachY[index] + beachMiddleY);
context.scale(beachScaleX[index], beachScaleY[index]);
context.rotate(degreesToRadians(beachRotation[index]));
context.globalAlpha = beachOpacity[index];
context.translate(-beachMiddleX, -beachMiddleY);
context.drawImage(beach, beachX[index], beachY[index]);
context.restore();
index ++;
}
Your browser doesn't support canvas. Please download a modern browser
2012-07-14
SpaceDog
本文标签: html5怎么设置逐帧动画 Html5
版权声明:本文标题:html5怎么设置逐帧动画,HTML5 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.freenas.com.cn/jishu/1693510000h226304.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论