Javascript 为什么Canvas实现比Pixi.JS更快？

我正在写一个2D游戏引擎。为了检查性能，我画了1000个对象，每个对象有3个子对象。仅绘制子对象，结构如下所示：

save();

translate(object.x, object.y);
rotate(object.rotation);

beginPath();
moveTo(0, 0);
lineTo(object.length / 8, -object.length / 8);
lineTo(object.length, 0);
lineTo(object.length / 8, object.length / 8);
stroke();

for (child in children) {
  // repeat the same for each child
}

restore();

var对象={
x:,，
y:,，
长度：，
儿童：[
/*这重复三次*/
]
};

不使用路径缓存绘制任何对象的实现如下所示：

save();

translate(object.x, object.y);
rotate(object.rotation);

beginPath();
moveTo(0, 0);
lineTo(object.length / 8, -object.length / 8);
lineTo(object.length, 0);
lineTo(object.length / 8, object.length / 8);
stroke();

for (child in children) {
  // repeat the same for each child
}

restore();

500个对象的速度约为25FPS（1500个子对象）。我尝试了PIXI.js，看看WebGL是否会更快。我对对象使用了

PIXI.DisplayObjectContainer

，对每个子对象使用了

PIXI.Graphics

（在初始化时对每个子对象调用

moveTo…lineTo

块一次）。它不能超过20帧/秒

---

我是否做错了什么，或者在绘制路径时，是否有比WebGL更神奇的画布性能提升？它是在Ubuntu 12.04 x64上的Chrome 33.0.1750.149上发布的。

Hmm考虑到这个问题发布的日期，您可能已经解决了这个问题

很可能您使用的是

Canvas渲染器

，而不是

WebGL

one

您可以强制它使用

WebGL渲染器

，如下所示

var renderer = new PIXI.WebGLRenderer(WIDTH, HEIGHT);

而不是

var renderer = new PIXI.autoDetectRenderer(WIDTH, HEIGHT);
// can be either Canvas or WebGL

---

这真的是一个pixi.js问题，不是一个WebGL问题吗？有很多WebGL绘制多达一百万条路径的示例。如果pixi.js做不到，那可以说是pixi.js的问题，而不是WebGL的问题。@gman right，删除了WebGL标记