0
我想製作一個動畫精靈四處走動。因此，我使用一個精靈表單來處理角色的所有動作，並通過不同的動畫階段進行動畫製作。Canvas sprite動畫在iPhone/Safari和Chrome上部分隱藏，但在Firefox上可以使用
一切正常，在PC上使用Firefox，但與Chrome和iPhone上的動畫被部分損壞。你可以在這裏測試它在PC http://fiddle.jshell.net/WnjB6/48/
和iphone直接去這裏： http://fiddle.jshell.net/WnjB6/48/show/
我發現沒有被動畫過程中只顯示在iPhone上的spritesheet的第二列。使用較小的spritesheet這是工作。看到這裏
PC http://jsfiddle.net/WnjB6/7/
iphone http://jsfiddle.net/WnjB6/7/show
是否有iPhone上的文件大小的限制或Chrome如何處理圖像？
這裏是源
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
// Constructor for an animation object
// image: graphics source
// x, y: position to draw the animation
// width, height: size of each tile
// htiles: number of tiles horizontally in the image source
var Animation = function(image, x, y, width, height, htiles) {
this.image = image;
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.htiles = htiles;
this.animations = {};
this.currentAnimation = [0];
this.currentFrame = 0;
}
// Add animation to the object
Animation.prototype.add = function(name, frames) {
this.animations[name] = frames;
};
// Select animation by name
Animation.prototype.play = function(name) {
this.currentAnimation = this.animations[name];
this.currentFrame = 0;
};
// Advance animation, and draw the tile
Animation.prototype.nextFrame = function() {
// Move to next frame in current animation
this.currentFrame = (this.currentFrame + 1) % this.currentAnimation.length;
// Extract which image tile that is
var tile = this.currentAnimation[this.currentFrame];
this.drawTile(tile);
};
// Draw the given tile at the current position
Animation.prototype.drawTile = function(tile) {
// Clear region we are going to draw on
context.clearRect(this.x, this.y, this.width, this.height);
context.drawImage(this.image, (tile % this.htiles) * this.width, Math.floor(tile/this.htiles) * this.height, this.width, this.height, this.x, this.y, this.width, this.height);
};
// Initialize the animation
var image = new Image();
image.src = 'http://www.playa.cc/pic/playerstant.png';
var player1 = new Animation(image, 0, 0, 51, 51, 2);
var aniStates = ['stand', 'right', 'walk'];
player1.add(aniStates[0], [65, 67, 69, 71, 73, 75, 77, 79]);
player1.add(aniStates[1], [0, 2, 4, 6, 8, 10, 12, 14, 16]);
player1.add(aniStates[2], [72, 74, 76, 78, 1, 3, 5, 7, 9]);
// Start with the walking animation, and start animating
player1.play(aniStates[0]);
var interval = setInterval(function() {
player1.nextFrame();
}, 200);
// Toggle animation between standing and walking every 3 seconds
var mode = 0;
setInterval(function() {
player1.play(aniStates[mode++]);
mode = mode % aniStates.length;
}, 3000);
感謝 STOT