基于HTML5 canvas绘图技术研究

摘 要：目前，互联网正处于突飞猛进的发展阶段，W3C的HTML工作组于去年10月28日推出的HTML5推荐标准（W3C

>> 基于HTML5 web 技术APP快速开发研究 基于HTML5的移动Web技术 基于HTML5的离线存储技术 基于HTML5技术的Web游戏设计 基于HTML5技术的Web监控界面开发 基于Html5技术的WEB开发 基于HTML5技术企业网站设计 HTML5 WebSocket技术研究 基于HTML5的网络地图研究与实现 不同设备基于Html5 Canvas的浏览器渲染结果比较 HTML5技术改变网络 基于HTML5技术的大坝安全监测图像绘制技术 基于HTML5技术的高校门户网站设计 基于HTML5网页交互动画创作技术的比较与实践 基于HTML5技术的云存储应用设计探讨 基于HTML5的全景漫游技术在校园中的应用 基于服务的HTML5视频网站访问方法研究 基于HTML5的数据可视化实现方法研究 基于HTML5跨平台移动应用的研究与实践 基于HTML5的移动端图片压缩上传方法研究 常见问题解答 当前所在位置：l文件保存，则在Hbuilder右侧“web浏览器窗口”即可显示结果，如图2所示。

图2 Hbuilde中输入并显示矩形

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

图3 Hbuilde窗口 图4 在Chrome中测试的结果

“运行”下拉菜单

其它图形不像画矩形那样的直截了当，需要一些额外的步骤的，需要用到以下四个方法：

beginPath（）：起始一条路径，或重置当前路径；closePath（）：创建从当前点回到起始点的路径；stroke（）：绘制已定义的路径；fill（）：填充当前绘图（路径）。

第一步是利用beginPath方法创建一个路径。在计算机内存里，路径是以一组基本子路径（直线、弧线等）的形式储存的，它们的组合就构成一个复杂的图形。计算机每次调用beginPath方法时，基本子路径组都会被重置，然后可以进行新的图形绘制操作。第二步是进行实际绘制简单或复杂路径的部分，如画直线、圆、曲线等。第三步是调用closePath方法，此方法尝试用直线连接当前端点与起始端点来关闭路径，但如果图形已经关闭或者只有一个点，它会什么都不做。因此，此步不是必须的。最后一步是调用stroke方法或fill方法，这时，图形才是实际的绘制到canvas画布上去。Stroke方法是绘制图形的边框，fill方法会用填充出一个实心图形。

当调用fill方法时，开放的路径会自动闭合，而无须调用closePath方法。

绘制矩形除了上面介绍的三种方法外，还可以用rect方法绘制矩形路径的，此方法表示如下：rect（x， y， width， height）

它接受四个参数，其中x和y是矩形左上角坐标，width和height分别是矩形的宽和高。图5右边矩形可用如下路径方法绘制：

//绘制矩形

context.beginPath（）； // 开始路径

context.rect（100，50，50，50）；//在以坐标（100，50）为左上角点开始绘制宽高为50像素的矩形

context.closePath（）； // 结束路径

context.stroke（）；

利用路径可以绘制矩形、直线、圆、弧、曲线，运用的canvas API除了上面介绍的几个之外，还有很多，常用的见表1：

表1 Canvas的API-路径方法

[方法＼&描述＼&moveTo（）

lineTo（）

clip（）

quadraticCurveTo（）

bezierCurveTo（）

arc（）

arcTo（）

isPointInPath（）＼&把路径移动到画布中的指定点，不创建线条

添加一个新点，创建从该点到最后指定点的线条

从原始画布剪切任意形状和尺寸的区域

创建二次贝塞尔曲线

创建三次方贝塞尔曲线

创建弧/曲线（用于创建圆形或部分圆）

创建两切线之间的弧/曲线

如果指定的点位于当前路径中，返回布尔值＼&]

在以前做数据统计时，绘制饼图使用的是第三方组件，如JfreeChart组件，或者Flash组件FusionCharts Free和Open Flash Chart。HTML5引入Canvas元素后，就可以利用Canvas绘制饼图原型，此外Canvas功能模拟函数图像，如三角函数、一次函数、二次函数和三次函数的生成的曲线，如模拟sin函数图像，见图5所示。

图5 Hbuilde中输入并显示sin函数图像

4 结束语

由于篇幅限制，本文仅对canvas 元素在 Web 绘图做最基本的介绍。虽然绘图软件很多，但是canvas是不依赖任何插件的标准 Web 像素级绘图技术。实验证明，将HTML5 Canvas技术应用于图形图像处理具有很大的优势，发展前景广阔，特别是移动终端上，还有网络教学方面应用。相信HTML5 Canvas技术与云计算等技术结合起来，实现在线协同绘图，完成大型的复杂绘图工作，完全成为可能，也是未来研究的重要方向。

参考文献：

[1]W3CHTML5的正式推荐标准.国际新闻，国内新闻，标准进展[EB/OL].5下一代Web开发标准研究[J].计算机技术与发展，2011，21（8）.：55.

[3]HBuilde：最快的Web开发IDE.移动开发[EB/OL].，2014-2-12.

[4]HTML5 Canvas初体验之绘图基础[EB/OL]. 5 Canvas核心技术[M]. 北京.机械工业出版社.2013-5：48

作者简介：杨秀生（1972―），男，安徽安庆市，助讲，汉，安徽理工大学工程硕士，主要研究方向为计算机网络、web编程。