基于HTML5 canvas绘图技术研究

杨秀生

关键词：HTML5；Canvas；Javascript；API；HBuilder

1 概述

W3C（万维网联盟）的HTML工作组终于在去年10月28日正式发布了HTML5的正式推荐标准（W3C Recommendation）。相信在不久的将来，HTML5标准将会逐渐取代1999年制定的HTML？4.01和XHTML？1.0两个html标准，以符合当代的网络需求，为桌面平台和移动平台之间带来无缝衔接的丰富内容。HTML5带来了一组新的用户体验，如Web的音频和视频不再需要插件，通过Canvas更灵活的完成图像绘制，而不必考虑屏幕的分辨率，浏览器对可扩展矢量图（SVG）和数学标记语言（MathML）的本地支持，通过引入新的注释信息以增强对东亚文字呈现（Ruby）的支持，对富Web应用信息无障碍新特性的支持，等等[1]。Canvas元素最先由苹果公司的Safari浏览器引入，用于在Mac OS X WebKit中创建控制板部件（dashboard widget），在HTML5 Canvas元素没有推出之前，web开发人员实现web绘图往往是通过SVG、VML等技术，但这些基于XML的绘图语言声明式的绘图方式并不能满足复杂绘图操作在性能上的需求，比如Web游戏所需要的像素级别的绘图能力。HTML5提供了Canvas标记元素来实现绘图功能。该元素可以使用浏览器脚本语言（通常是JavaScript）调用Canvas自带的函数（即方法）进行图形绘制，和对图像的像素级操作。相较于传统的在服务器端先画好图片，再把图片发到浏览器中，或用第三方插件显示的方式，它与浏览器渲染引擎结合紧密，节约了资源，并极大地简化了图形和网页中其他元素的交互过程[2]。目前该元素已被加入HTML5标准的草案，并且得到了所有主流浏览器的支持。本文详细介绍在可视化开发工具HBuilder中利用HTML5 Canvas元素实现绘制基本图形方法和步骤。

2 可视化开发工具HBuilder介绍

目前主流的前端编码工具有windows记事本为代表的文本编辑器，以及Webstorm、Brackets、Dreamweaver、Microsoft Visual Studio 2008/2012 等IDE（集成开发环境）。但适合HTML5设计的，只有HBuilder、Webstorm和Brackets。

Hbuilder（飞一样的编码）是DCloud（数字天堂）推出一款支持HTML5的Web开发IDE，官方网站为http：//www.dcloud.io。截止发稿时，Hbuilder for windows最高版本号为HBuilder 6.1.3.201507202206，

支持在线更新。DCloud是W3C成员及HTML5中国产业联盟发起单位。DCloud CEO王安表示，“HBuilder最大的优势就是快，通过完整的语法提示和代码输入法、代码块及很多配套，HBuilder能大幅提升HTML、js、css的开发效率”[3]。

3 基本图形绘制

3.1 构建Canvas元素 使用HTML5 Canvas绘制图形比较简单，首先需要在HTML页面中创建一个Canvas元素，目的是充当2D渲染上下文的封装，绘图是在2D渲染上下文中进行，而不是在canvas元素中。例如代码可表示如下：

您的浏览器不支持canvas！

这样页面上就定义了一块400px×300px的画布，要想显示其范围，可以通过属性设置为这块区域添加边框或背景。如果不设置width（宽度）和height（高度）两属性，则默认为宽为300px，高为150px。如果浏览器不支持这个API，则就会显示“您的浏览器不支持canvas！”。

每个canvas元素都有一个对应的context对象（上下文对象），Canvas API定义在这个context对象上面，所以需要获取这个对象，方法是使用getContext方法。

var canvas= document.getElementById（“mycanvas”）；

if （canvas.getContext） {

var context= canvas.getContext（'2d'）；

}

canvas中的参数是以像素（px）为单位的，getContext方法指定参数2d，表示该canvas对象用于生成2D图案（即平面图案），2D渲染上下文是一标准的基于屏幕的绘图平台。与其他2D平台同样，使用同一个平面直角坐标系左上角的原点（0，0）。向右移动会增加x的值，向下移动则增加y值[4]。见图1所示：

3.2 绘制基本图形 利用canvas结合CSS（层叠样式表）和Javascript可绘制不同图形图像，如直线、多边形、圆、椭圆、曲线等，可完成类似photoshop软件对图像进行渲染，canvas只支持一种基本形状的绘制，即矩形，并没有直接提供绘制其他几何图形的方法，但是其它几何图形都可以通过一组路径绘制函数来绘制。

Canvas的API 提供了如下三个方法，分别用于矩形的清除、描边及填充：

·clearRect（double x， double y， double w， double h）

·strokeRect（double x， double y， double w， double h）

·fillRect（double x， double y， double w， double h）[5]

在Hbuilder代码窗口与之间输入如下主要代码：

以z1.html文件保存，则在Hbuilder右侧“web浏览器窗口”即可显示结果，如图2所示。

图2 Hbuilde中输入并显示矩形

也可通过运行菜单项从下拉菜单中选择其它浏览器（一定要选择已安装的并支持Canvas的浏览器）进行测试，如图3所示，如选择Chrome浏览器（版本号：43.0.2357.124），显示结果如图4所示。