画布精灵动画在 iPhone/Safari 和 Chrome 上部分不可见，但在 Firefox 上没问题答案

【问题标题】：Canvas sprite animation partially invisible on iPhone/Safari and Chrome, but ok on Firefox画布精灵动画在 iPhone/Safari 和 Chrome 上部分不可见，但在 Firefox 上没问题
【发布时间】：2012-11-11 02:03:19
【问题描述】：

我想制作一个四处走动的动画精灵。因此，我使用一个包含角色所有动作的精灵表，并通过不同的动画阶段制作动画。

在装有 Firefox 的 PC 上一切正常，但在 Chrome 和 iPhone 上，动画部分损坏。你可以在PC上测试它 http://fiddle.jshell.net/WnjB6/48/

对于 iphone 直接去这里： http://fiddle.jshell.net/WnjB6/48/show/

我发现 spritesheet 的第二列仅在 iphone 上的动画期间没有显示。对于较小的精灵表，这是可行的。看这里

电脑 http://jsfiddle.net/WnjB6/7/

苹果手机 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);

谢谢停下来

【问题讨论】：

标签： javascript iphone html animation canvas

【解决方案1】：

对长问题给出简短的回答：

当剪辑部分超出原始图像时，iPhone 上的 Chrome 和 Safari 不会在画布上显示图像。例如，您的图像尺寸为 x:100, y:100，您使用

进行绘制

context.drawImage(image, 0, 0, 101 /* 错误 */, 100, 0, 0, 100, 100)

另见drawImage spec

【讨论】：