如何将 HTML5 性能发挥到极致

时间:2017-05-04

  1.使用getBounds/ getGraphicBounds。

var sp = new Sprite();
sp.graphics.drawRect(00100100"#FF0000");
var bounds = sp.getGraphicBounds();
Laya.stage.addChild(sp);

  getBounds可以满足多数多数需求,但由于其需要计算边界,不适合频繁调用。

  2.设置容器的autoSize为true。

var sp = new Sprite();
sp.autoSize = true;
sp.graphics.drawRect(00100100"#FF0000");
Laya.stage.addChild(sp);

  上述代码可以在运行时正确获取宽高。autoSize在获取宽高并且显示列表的状态发生改变时会重新计算(autoSize通过getBoudns计算宽高)。所以对拥有大量子对象的容器应用autoSize是不可取的。如果设置了size,autoSize将不起效。

  使用loadImage后获取宽高:

var sp = new Sprite();
sp.loadImage("res/apes/monkey2.png"0000, Handler.create(thisfunction()
{
	console.log(sp.width, sp.height);
}));
Laya.stage.addChild(sp);

  loadImage在加载完成的回调函数触发之后才可以正确获取宽高。

  3.直接调用size设置:

Laya.loader.load("res/apes/monkey2.png", Handler.create(thisfunction()
{
	var texture = Laya.loader.getRes("res/apes/monkey2.png");
	var sp = new Sprite();
	sp.graphics.drawTexture(texture, 00);
	sp.size(texture.width, texture.height);
	Laya.stage.addChild(sp);
}));

  使用Graphics.drawTexture并不会自动设置容器的宽高,但是可以使用Texture的宽高赋予容器。毋庸置疑,这是最高效的方式。

  注:getGraphicsBounds用于获取矢量绘图宽高。

  根据活动状态改变帧频

  帧频有三种模式,Stage.FRAME_SLOW维持FPS在30;Stage.FRAME_FAST维持FPS在60;Stage.FRAME_MOUSE则选择性维持FPS在30或60帧。

  • 共9页:
  • 上一页
  • 7/9
  • 下一页
  • 上一篇:HTML5 VideoAPI,打造自己的Web视频播放器 下一篇:解决html5中video标签无法播放mp4问题的办法

    相关文章

    最新文章