[发明专利]安卓系统上基于GPU实现的Canvas元素渲染方法及装置

说明书

技术领域

本发明涉及网页渲染领域，更为具体地，涉及一种在安卓系统上基于GPU硬件实现的Canvas元素渲染方法及装置。

 

背景技术

在HTML5技术中的2D Canvas规范中定义了一组2D Canvas 绘图API（应用程序接口，Application Programming Interface），利用这些API可以在网页上进行立即模式的二维图形绘制。这里，Canvas是指画布。如果网页中包含一个Canvas标签，就可以通过JavaScript代码在这个标签的区域范围内，使用各种2D Canvas绘图API绘制用户想要的东西。

GPU英文全称Graphic Processing Unit，中文翻译为“图形处理单元”。GPU是相对于CPU的一个概念。GPU是显示卡的“大脑”，它决定了大部分性能，同时也是2D显示卡和3D显示卡的区别依据。2D显示芯片在处理3D图像和特效时主要依赖CPU的处理能力，称为“软加速”。3D显示芯片是将三维图像和特效处理功能集中在显示芯片内，也即所谓的“硬件加速”功能。

在现有的浏览器实现中，是将JavaScript对2D Canvas绘图API的调用映射到一个平台相关的2D绘图库，在该2D绘图库中绘制离屏位图（这个步骤通常称作绘图步骤），然后再把该位图拷贝到当前程序的可见窗口上（这个步骤通常称之为混合步骤）。这种方式的缺陷在于无论是绘图步骤还是混合步骤都只能依赖CPU来完成，效率较低，无法充分利用GPU进行硬件加速。

发明内容

鉴于上述，本发明提出了一种在安卓系统上基于GPU硬件实现的Html5 Canvas元素渲染方法和装置，该方法和装置利用Android操作系统提供的本地窗口渲染机制和OpenGL ES API，使用GPU来完成Canvas元素的绘制和混合，从而实现利用GPU硬件加速来提高Canvas渲染性能。

根据本发明的一个方面，提供了一种在安卓系统上基于GPU硬件实现的Html5 Canvas元素渲染方法，包括：在检测到针对Html5网页中的Canvas元素的渲染操作指令且完成初始化创建操作后，通过Skia GPU函数库将针对2D Canvas绘图API的调用指令转换为针对OpenGL ES API的调用指令；将在所述初始化操作时创建的EGL Context设置为渲染操作所在线程的当前上下文；根据所述Canvas元素的属性信息，使用所述GPU在所述初始化操作时创建的离屏本地窗口中渲染所述Canvas元素；以及利用所述GPU的贴图操作功能，将渲染后的Canvas元素从所述离屏本地窗口复制到设备的当前活动窗口上，所述初始化创建操作包括：基于所述Canvas元素的属性信息，为所述Canvas元素创建离屏本地窗口；以及基于所述离屏本地窗口，创建EGL Window Surface和EGL Context。

在上述方面的一个或多个示例中，通过Skia GPU函数库将针对2D Canvas绘图API的调用指令转换为针对OpenGL ES API的调用指令可以包括：将在所述离屏本地窗口中创建的EGL Windows Surface包装成SkGpuDevice；创建基于SkGpuDevice的SkCanvas；以及利用所述SkCanvas将针对2D Canvas绘图API的调用指令转换为针对OpenGL ES API的调用指令。

在上述方面的一个或多个示例中，利用GPU的贴图操作功能，将渲染后的Canvas元素从所述离屏本地窗口复制到设备的当前活动窗口上可以包括：在完成所述离屏本地窗口中的Canvas元素渲染后，将所述离屏本地窗口与OpenGL贴图绑定；以及通过贴图操作将所述离屏本地窗口复制到设备的当前活动窗口上。

在上述方面的一个或多个示例中，将所述离屏本地窗口与OpenGL贴图绑定在接收到窗口更新请求后执行，所述窗口更新请求是在客户端的渲染引擎监测到在所述离屏本地窗口中完成一个或多个Canvas元素渲染后发出的。

在上述方面的一个或多个示例中，所述Canvas元素的属性信息是从渲染引擎中获取的，所述属性信息至少包括元素大小和元素位置。