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），在HTML5Canvas元素没有推出之前，web开发人员实现web绘图往往是通过SVG、VML等技术，但这些基于XML的绘图语言声明式的绘图方式并不能满足复杂绘图操作在性能上的需求，比如Web游戏所需要的像素级别的绘图能力。HTML5提供了Canvas 标记元素来实现绘图功能。该元素可以使用浏览器脚本语言（通常是JavaScript）调用Canvas自带的函数（即方法）进行图形绘制，和对图像的像素级操作。相较于传统的在服务器端先画好图片，再把图片发到浏览器中，或用第三方插件显示的方式，它与浏览器渲染引擎结合紧密，节约了资源，并极大地简化了图形和网页中其他元素的交互过程[2]。目前该元素已被加入HTML5标准的草案，并且得到了所有主流浏览器的支持。本文详细介绍在可视化开发工具HBuilder 中利用HTML5Canvas元素实现绘制基本图形方法和步骤。
2可视化开发工具HBuilder介绍
目前主流的前端编码工具有windows记事本为代表的文本编辑器，以及Webstorm、Brackets、Dreamweaver、Microsoft Visual Studio 2008/2012等IDE（集成开发环境）。但适合HTML5设计的，只有HBuilder、Webstorm和Brackets。
Hbuilder（飞一样的编码）是DCloud（数字天堂）推出一款支持HTML5的Web开发IDE，为www.dcloud.io。截止发稿时，Hbuilder for windows最高版本号为HBuilder6.1.3.201507202206，支持在线更新。DCloud是W3C成员及HTML5中国产业联盟发起单位。DCloud CEO王安表示，“HBuilder最大的优势就是快，通过完整的语法提示和代码输入法、代码块及很多配套，HBuilder能大幅提升HTML、js、css的开发效率”[3]。
3基本图形绘制
3.1构建Canvas元素使用HTML5Canvas绘制图形比较简单，首先需要在HTML页面中创建一个Canvas元素，目的是充当2D渲染上下文的封装，绘图是在2D渲染上下文中进行，而不是在canvas 元素中。例如代码可表示如下：
<canvas id=”mycanvas”width=“400”height=”300”>
您的浏览器不支持canvas！
</canvas>
这样页面上就定义了一块400px×300px的画布，要想显示其范围，可以通过属性设置为这块区域添加边框或背景。如果不设置
width（宽度）和height（高度）两属性，则默认为宽为300px，高为150px。如果浏览器不支持这个API，则就会显示“您的浏览器不支持canvas！”。
每个canvas元素都有一个对应的context对象（上下文对象），Canvas API定义在这个context对象上面，所以需要获取这个对象，方法是使用getContext方法。
var ElementById(“mycanvas”)；
Context){
var Context('2d');
}
canvas中的参数是以像素（px）为单位的，getContext方法指定参数2d，表示该canvas对象
用于生成2D图案（即平面
图案），2D渲染上下文是一
标准的基于屏幕的绘图平
台。与其他2D平台同样，
使用同一个平面直角坐标
系左上角的原点（0,0）。向
右移动会增加x的值，向下
移动则增加y值[4]。见图1
所示：
上面代码中id设为mycanvas，是让javascript可以通过id来到Canvas元素。接着要获取canvas对象的访问权，然后使用其对应的DOM元素的getContext("2d")对象即可开始绘图。
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代码窗口<body>与</body>之间输入如下主要代码：
<canvas id="mycanvas"width=200height="150"></canvas>
<script language="javascript">
var ElementById('mycanvas');
Context){
var Context('2d');
//绘制矩形
基于HTML5canvas绘图技术研究
杨秀生
安徽理工大学计算机科学与工程学院安徽淮南232001
合肥职业技术学院计算机系安徽巢湖238000；
摘要：目前，互联网正处于突飞猛进的发展阶段，W3C的HTML工作组于去年10月28日推出的HTML5推荐标准（W3C Recommendation）将逐渐成为下一代web标准，其中新增的Canvas元素及相应的API编程接口，结合javascript代码，可实现动态绘图并加以渲染。本文主要阐述了运用HTML5Canvas元素在HBuilder可视化工具实现基本图形绘制，分析其实现方法和步骤。
关键词:HTML5；Canvas；Javascript；API；HBuilder
图12D渲染上下文中直角坐标系[4]
·
194·. All Rights Reserved.
context.fillStyle='blue';
context.fillRect(30,50,50,50);//四个参数分别表示：
矩形左上角坐标(x,y)，
矩形宽度，矩形高度context.clearRect(40,60,30,30);//clearRect 方法用来清除某个矩形区域的内容
context.strokeRect(100,50,50,50);//strokeRect 方法与fillRect 类似，用来绘制空心矩形
svg图形context.stroke();}
</script>
以z1.html 文件保存，
则在Hbuilder 右侧“web 浏览器窗口”即可显示结果，如图2
所示。
图2Hbuilde 中输入并显示矩形
也可通过运行菜单项从下拉菜单中选择其它浏览器
（一定要选择已安装的并支持Canvas 的浏览器）
进行测试，如图3所示，如选择Chrome 浏览器（版本号：43.0.2357.124），显示结果如图4所示。
图3Hbuilde 窗口图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();//开始路径
<(100,50,50,50);//在以坐标(100,50)为左上角点开始绘制宽高为50像素的矩形
context.closePath();//结束路径context.stroke();
利用路径可以绘制矩形、直线、
圆、弧、曲线，运用的canvas API 除了上面介绍的几个之外，
还有很多，常用的见表1：表1Canvas 的API-路径方法
方法
描述
moveTo()lineTo()clip()
quadraticCurveTo()bezierCurveTo()arc()arcTo()
isPointInPath()
把路径移动到画布中的指定点，不创建线条添加一个新点，创建从该点到最后指定点的线条从原始画布剪切任意形状和尺寸的区域创建二次贝塞尔曲线创建三次方贝塞尔曲线
创建弧/曲线（用于创建圆形或部分圆）创建两切线之间的弧/曲线
如果指定的点位于当前路径中，返回布尔值
在以前做数据统计时，绘制饼图使用的是第三方组件，
如JfreeChart 组件，或者Flash 组件FusionCharts Free 和Open Flash Chart 。HTML5引入Canvas 元素后，就可以利用Canvas 绘制饼图原
型，此外Canvas 功能模拟函数图像，如三角函数、
一次函数、二次函数和三次函数的生成的曲线，
如模拟sin 函数图像，见图5所示。图5Hbuilde 中输入并显示sin 函数图像
4结束语
由于篇幅限制，
本文仅对canvas 元素在Web 绘图做最基本的介绍。虽然绘图软件很多，但是canvas 是不依赖任何插件的标准
Web 像素级绘图技术。实验证明，
将HTML5Canvas 技术应用于图形图像处理具有很大的优势，发展前景广阔，
特别是移动终端上，还有网络教学方面应用。相信HTML5Canvas 技术与云计算等技术结
合起来，实现在线协同绘图，完成大型的复杂绘图工作，
完全成为可能，也是未来研究的重要方向。参考文献:
[1]W3C 发布HTML5的正式推荐标准.国际新闻，国内新闻，标准进展[EB/OL]./archives/677/，2014-11-19.
[2]刘华星，杨庚.HTML5下一代Web 开发标准研究[J].计算机技术与发展,2011,21(8).:55.
[3]HBuilde：最快的Web 开发IDE.移动开发[EB/OL].www.wacpp.
com/html/wacnews/201402/news8918.html ，
2014-2-12.[4]HTML5Canvas 初体验之绘图基础[EB/OL].www.kankanews/ICkengine/archives/22230.shtml.2013-8-4.
[5]David Geary.HTML5Canvas 核心技术[M].北京.机械工业出版社.2013-5:48
作者简介：杨秀生（1972—），男，安徽安庆市，助讲，汉，安徽理工大学工程硕士，主要研究方向为计算机网络、web 编程。
·195·
. All Rights Reserved.

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。