[发明专利]2D canvas网页元素的渲染方法、装置及电子设备

说明书

本申请公开了一种2D canvas网页元素的渲染方法，包括：从客户端脚本层截获对2D canvas网页元素的绘图指令；将所述2D canvas网页元素的绘图指令携带的指令信息传送到系统框架层；根据所述指令信息，生成与所述2D canvas网页元素的绘图指令对应的OpenGL绘图指令；将所述OpenGL绘图指令绘制到系统的OpenGL渲染视窗，形成所述2D canvas网页元素的渲染结果。采用该方法可以提高2D canvas网页元素渲染性能低的问题。

本申请是申请日为2016年9月14日，申请号为201610827353.8，发明名称为“3Dcanvas网页元素的渲染方法、装置及电子设备”的中国专利申请的分案申请。

技术领域

本申请涉及移动互联网技术领域，具体涉及一种2D canvas网页元素的渲染方法、装置及电子设备。

背景技术

随着Web技术的发展和HTML5标准的落地，HTML5开发越来越火热。HTML5开发具有跨平台、开发成本低、迭代快、易动态发布等优点，在移动App开发中占据的比重越来越大。Canvas元素作为HTML5的一个重要特性，在移动开发页面展示中，特别是图片处理、动画展示等场合，起了不可或缺的作用。

在移动应用程序中，HTML5的3D canvas依靠系统Webview来完成渲染绘制，实现上依赖于系统Webview是否支持WebGL接口。WebGL是一种3D绘图标准，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。显然，WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等。

然而，HTML5的3D canvas中的WebGL直到Android 5.0、iOS 8.0才被支持，并且支持的版本仅为WebGL 1.1，而非最新的WebGL 2.0。综上所述，现有技术存在部分移动操作系统不支持WebGL渲染的问题。

发明内容

本申请提供一种3D canvas网页元素的渲染方法、装置及电子设备，以解决现有技术下部分移动操作系统不支持WebGL渲染的问题。本申请还提供一种2D canvas网页元素的渲染方法、装置及电子设备。

本申请提供一种3D canvas网页元素的渲染方法，包括：

截获对3D canvas网页元素的WebGL绘图指令；

将所述WebGL绘图指令携带的指令信息传送到系统框架层；

根据所述指令信息，生成与所述WebGL绘图指令对应的OpenGL绘图指令；

将所述OpenGL绘图指令绘制到系统的OpenGL渲染视窗，形成所述3D canvas网页元素的渲染结果。

可选的，所述截获对3D canvas网页元素的WebGL绘图指令，采用如下方式：

通过所述3D canvas网页元素的替换DOM对象，截获所述WebGL绘图指令。

可选的，还包括：

将所述3D canvas网页元素的DOM对象替换为所述替换DOM对象。

可选的，在所述将所述3D canvas网页元素的DOM对象替换为所述替换DOM对象之前，还包括：

判断所述操作系统是否允许执行DOM对象替换的操作；若是，则进入下一步骤；若否，则使用Webview视窗绘制所述3D canvas网页元素。