谢贤博，聂 芸，邓红艳，张 宇

（华北计算技术研究所 地理信息与图形图像技术研发中心，北京 邮编 100083）

基于WebGL的Canvas元素2D绘制加速

谢贤博，聂 芸，邓红艳，张 宇

（华北计算技术研究所 地理信息与图形图像技术研发中心，北京 邮编 100083）

HTML5中的Canvas元素极大地丰富了网页所能呈现的图像信息。Canvas元素具有两种绘图模式：Canvas2D接口类似于画布，用于渲染2D内容，使用简单，可由浏览器负责硬件加速；WebGL接口类似于OpenGL-ES，负责渲染3d场景，使用复杂，但可以直接使用硬件。当绘制的2D基本图元数量较多时，实时性要求高时，Canvas2D接口性能不足。本文将以WebGL为基础，提出一种优化思想，通过缓冲技术、常量属性化技术、帧间缓存技术、DMA技术，加速不同2D基本图元的绘制。本文对不同的2D图元绘制方式性能进行对比实验，证实以WebGL加速Canvas的2D绘制是可行并且有效的，并且给出一个实际应用实例。

计算机图形学；WebGL绘制；设计与实现；高性能渲染；HTML5

0 引言

随着HTML5的普及，网页可以承载更多以往桌面或移动客户端的内容。Canvas是HTML5引入的新画布元素，开发者可以用JavaScript脚本在该元素上绘制任意图形。Canvas本身不具备画图属性，而是通过获取Canvas中的绘制上下文(Rendering Context)，利用绘制上下文实现绘制。目前有两种绘制上下文：Canvas2D是用于绘制2D图形的API，包括基本图形绘制、文字绘制、图形变换、图片绘制和合成等；而WebGL是目前用于绘制3d图形的API，拥有一套简化的OpenGL-ES的功能，可以操作硬件，也可以使用封装好的图形库简化开发[1,2]。

目前浏览器上的主流的基于Canvas的2D引擎，尽管封装各不相同，都是用Canvas2D进行底层渲染；……