[发明专利]一种HTML5 Canvas应用处理方法、装置及处理器

说明书

技术领域

本发明涉及移动通信领域，尤其涉及一种HTML5Canvas应用处理方法、装置及处理器。 

背景技术

HTML（Hyper Text Markup Language，超文本标记语言）5规范定义了二维Canvas（画布）标签和其对应的Canvas API（Application Programming Interface，应用编程接口），CPU（Central Processing Unit，中央处理器）在执行某一使用了HTML5Canvas应用的计算机程序时，通过调用Canvas API可以在页面上添加Canvas标签，进行二维图形绘制。其中，所述计算机程序可以通过JS（JavaScript）代码等实现，这里并不限定。 

具体的，当CPU执行某一使用HTML5Canvas应用的程序时，执行JS代码，如果进程中的某一线程需要调用Canvas API，则CPU每调用一个绘图指令后，立即通过调用GPU（Graphic Processing Unit，图形处理器）进行该绘图指令对应的图形渲染，一帧画布的所有绘图指令调用完毕，该帧画布也可以完全渲染完成，等渲染完成，该线程再继续执行JS代码。 

但是，由于在同一个线程执行JS代码和图形渲染，所花费的时间为执行JS代码和图形渲染的总和，而图形的渲染非常耗时，每帧画布被渲染完成的时间较长，从而使得CPU执行该线程的时间很长，降低了HTML5Canvas应用的反应速度。 

发明内容

本发明实施例中提供了一种HTML5Canvas应用处理方法、装置及处理器，通过缓存绘图指令的方式实现并发线程处理，使得JS代码和图形渲染同时执行，从而充分利用不同线程的资源，大大提高HTML5Canvas应用的反应速度，实现HTML5Canvas应用的性能提升。 

本发明提供一种HTML5Canvas应用处理方法，包括： 

在第一线程中，CPU执行应用代码，当检测到需进行图形渲染时，在每帧画布绘制过程中，缓存该帧画布的所有绘图指令而不执行，在该帧画布绘制完毕后，将缓存的该帧画布的所有绘图指令发送至第二线程； 

在第二线程中，CPU调用GPU执行所述第一线程发送的每帧画布的所有绘图指令，依次对每帧画布进行渲染。 

优选的，所述将缓存的该帧画布的所有绘图指令发送至第二线程包括： 

在第一线程中CPU将每帧画布对应的缓存对象依次放入渲染队列的队尾，所述缓存对象所指向的缓存区域用于缓存对应帧画布的所有绘图指令； 

所述依次对每帧画布进行渲染包括： 

在第二线程中CPU从渲染队列的头部取出每帧画布对应的所述缓存对象，从所述缓存对象所指向的缓存区域获取对应帧画布的所有绘图指令，调用GPU依次对每帧画布进行渲染。 

优选的，所述方法还包括： 

在第二线程中，CPU判断未被渲染的画布帧数超过预设帧数阈值时，CPU指示第一线程暂停画布的绘制； 

CPU判断未被渲染的画布帧数减少至不超过所述帧数阈值时，CPU指示第一线程继续画布的绘制。 

优选的，所述缓存该帧画布的所有绘图指令包括：通过Skia库中的类SkDefferedCanvas来缓存该帧画布的所有绘图指令。 

本发明还提供一种HTML5Canvas应用处理装置，包括： 

第一处理单元，用于在第一线程中，当检测到需进行图形渲染时，在每帧画布绘制过程中，缓存该帧画布的所有绘图指令而不执行；在该帧画布绘制完毕后，将缓存的该帧画布的所有绘图指令发送至第二处理单元； 

第二处理单元，用于在第二线程中，调用GPU执行所述第一处理单元发送的每帧画布的所有绘图指令，依次对每帧画布进行渲染。 

优选的，第一处理单元具体用于通过以下方式实现所述将缓存的该帧画布的所有绘图指令发送至第二线程：在第一线程中将每帧画布对应的缓存对象依次放入渲染队列的队尾，所述缓存对象所指向的缓存区域用于缓存对应帧画布的所有绘图指令； 

第二处理单元具体用于：在第二线程中从渲染队列的头部取出每帧画布对应的所述缓存对象，调用GPU依次对每帧画布进行渲染。 

优选的，第二处理单元还用于：在第二线程中，判断未被渲染的画布帧数超过预设帧数阈值时，指示第一处理单元暂停画布的绘制，判断未被渲染的画布帧数减少至不超过所述帧数阈值时，指示第一处理单元继续画布的绘制。