WebGL 组件

事件

Draw [Data = {type: "canvas", pos, co, ctx}]
当实体将要绘制到舞台时触发
NoCanvas
当浏览器不支持canvas时触发

当此组件添加到实体，实体将会绘制在全局的webgl canvas元素上。canvas元素（因此任何WebGL的实体）总是绘制在DOM实体之下。

Sprite, Image, SpriteAnimation, and Color 都支持 WebGL 绘制。 目前 Text 实体需要使用 DOM 或 Canvas。

如果webgl上下文不存在，一个 WebGL实体将会自动创建。

注意:为了获得更好的性能，减少精灵序列的使用数量，尽量让不同精灵序列实体在不同的z级别。这是因为实体按Z顺序绘制，只有共享相同的纹理的实体可以有效地批量。

创建一个webgl实体，代码如下：

var myEntity = Crafty.e("2D, WebGL, Color")
     .color(1, 1, 0, 0.5)
     .attr({x: 13, y: 37, w: 42, h: 42});

属性

方法

Back to top

.context

实体绘制的webgl上下文

Back to top

.draw()

public this .draw([[Context ctx, ]Number x, Number y, Number w, Number h])
ctx

如果在另一画布上绘制需要，可以选择提供不同的2D上下文。

x

绘制部分的X偏移量

y

绘制部分的Y偏移量

w

绘制部分的宽度

h

绘制部分的高度

在WebGL画布元素绘制实体内部方法。它将相关信息写入到缓冲区允许批量渲染，而不是直接绘制。