我正在使用 KineticJS 来执行 HTML Canvas 动画。动画在所有桌面浏览器和非视网膜 iDevices（包括 iPad mini）上都能完美运行。但是，从 Retina 设备（浏览器或使用 appcelerator 的应用内 web 视图）来看，这些动画非常缓慢。我在视网膜显示器上看到了与画布动画类似的问题，但还没有找到任何真正的解决方案。
我的舞台构造函数是 1024w x 768h。 所有图像均已预加载。动画是使用预加载器的回调函数构造的。
如果我将我的舞台大小减半（并相应地缩放内部内容），动画将几乎正常播放（仍然比其他 ipad 有点断断续续）。我尝试这样做的唯一理由是我非常不理解视网膜显示器是两个“点”/像素。
欢迎任何见解或想法。我的下一个尝试是开始更改图像分辨率，而不是动态缩放。
【问题讨论】：
标签： javascript html canvas kineticjs retina-display
使用 KineticJS 5 或更高版本（我不确定何时引入此全局设置），最简单且干扰最小的方法是在实例化您的舞台之前将 Kinetic.pixelRatio 设置为您想要的值：
Kinetic.pixelRatio = 1;
var stage = new Kinetic.Stage({
...
});
【讨论】：
我在实例化我的 Stage 之前使用它来重载 pixelRatio 而不修改 KineticJS 的源文件。 （使您不必在任何更新后更新源文件。）
https://gist.github.com/echong/6107722
CoffeeScript：
# Adjust device pixel ratio
for className in ["HitCanvas", "SceneCanvas", "Canvas"]
Kinetic[className].prototype.init = ((p_method) -> (p_config={}) ->
p_config.pixelRatio = 1
p_method.call @, p_config
) Kinetic[className].prototype.init
JavaScript：
_ref = ["HitCanvas", "SceneCanvas", "Canvas"];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
className = _ref[_i];
Kinetic[className].prototype.init = (function(p_method) {
return function(p_config) {
if (p_config == null) {
p_config = {};
}
p_config.pixelRatio = 1;
return p_method.call(this, p_config);
};
})(Kinetic[className].prototype.init);
}
【讨论】：
这是由于四个月前添加的一项功能。 KineticJS 将识别设备的像素比是否超过 1，并尝试使其与像素比 1 一样清晰。问题是，就像您发现的那样，它会破坏性能，以至于它毫无用处。我们发现我们的用例就是这种情况。
我们的解决方案：我们在 KineticJS 中注释掉了像素比例部分，并将其硬编码为始终为 1。
优点：
性能恢复正常
缺点：
图像不那么清晰
这是我们进行更改的部分：
Kinetic.Canvas = function(width, height, pixelRatio) {
// eduplus change to fix pixel ratio performance problems
this.pixelRatio = 1; //pixelRatio || _pixelRatio;
在与 Eric 讨论这个问题时，他让 cmets 来研究像素比性能，但我认为他还没有时间这样做。希望这会有所帮助！
【讨论】：