HTML5中Canvas绘图研究.docVIP

HTML5中Canvas绘图研究 　　摘要：HTML5是新一代HTML标准，其新增的Canvas元素及相应的Canvas API编程接口，通过Javascript脚本绘制图形并实现渲染。简单陈述了HTML的发展，着重介绍了基于Canvas的图形绘制，分析了其实现步骤，展示了实例运行效果。 　　关键词关键词：HTML5；Canvas；绘图；Canvas API编程 　　中图分类号：TP319 　　文献标识码：A 文章编号文章编号2014）004015103 　　作者简介作者简介：龚丽（1971-），女，武汉软件工程职业学院副教授，研究方向为计算机编程、网页设计。 　　0 引言 　　HTML是一种利用标记（tag）来描述字体、大小、颜色及页面布局的语言，它是Internet上用于编写网页的主要语言。HTML的历史可以追溯到20世纪90年代初，1993年HTML第一个非标准版本以因特网草案的形式发布，到1999年推出4.01版，这期间HTML得到了快速发展。但这之后HTML似乎并无发展，对Web标准的焦点也转移到了XML和XHTML上。为了适应互联网的发展，并支持新的Web应用，同时克服现有的缺点，最新的HTML5标准应运而生，它不仅强化了Web网页的表现性能，还带来了强大的用于交互、多媒体和本地化等方面的标签以及应用编程接口。 　　相对HTML4而言，HTML5的语法发生了变化，同时取消了一些过时的标记，提供了一些新的元素和属性。 　　其中很重要的一个特点是，追加了本地数据库等Web应用功能，该功能将内嵌一个本地的SQL数据库，以加速交互式搜索、缓存以及索引操作。新增的Canvas元素以及伴随该元素而来的Canvas API编程接口，实现了在网页上绘制任何需要的、非常漂亮的图形与图像，从而制作出更加丰富多彩、赏心悦目的Web页面。 　　1 Canvas 　　如果在页面上放置一个Canvas元素，就相当于放置了一块“画布”，可以在其中进行图形绘制。实际上，单独的一个Canvas标记只是在页面中创建了一块矩形区域，默认情况下该矩形区域宽为300px，高为150px，用户也可以自定义大小。然后必须配合使用JavaScript脚本控制，才能够完成各种图形、线条、文字以及复杂的图形变换操作，甚至还可以加入高级动画。 　　HTML5 Canvas绘图与传统的基于SVG的矢量绘图技术不同，它是一种像素级别的位图绘图技术，也就是说Canvas区域中的每个像素都可控。还有一个很重要的特点，Canvas元素可以直接使用JavaScript脚本在Web页面进行绘图，不需要任何第三方插件，具有跨平台的先天优势，这与Flash、SVG和VML等也不相同。 　　2 基本图形绘制 　　无论绘制什么图形，首先要在页面中放置Canvas元素，即创建画布，代码如下： 　　 　　这样页面上就定义了一块200px*200px的隐形区域，在浏览器中运行时其不可见，如果需要它显示出来，可以通过属性设置为这块区域添加边框，代码为： 　　 　　Canvas的id设为new，在后面的绘制过程中可以通过id来找到该元素。接着要获取Canvas对象的访问权，并定义一个context变量，传入Canvas类型，这里是2d，具体代码如下： 　　var canvas=document.getElementById（new）； 　　var context=canvas.getContext（2d）； 　　上述准备工作完毕后，就可以进行基本图形的绘制，下面举两个简单实例。 　　2.1 矩形绘制 　　在画图之前，首先要设定绘图样式，主要是针对图形的颜色，但不限于图形颜色，如使用fillStyle设置填充的颜色值，strokeStyle设置边框的颜色值，lineWidth指定图形边框的线宽；然后分别使用fillRect方法和strokeRect方法来填充矩形和绘制矩形边框。具体代码如下： 　　context.fillStyle=blue； 　　context.strokeStyle=red； 　　context.lineWidth=1； 　　context.fillRect（10，10，180，150）； 　　context.strokeRect（10，10，180，150）； 　　其中，fillRect和strokeRect方法中的第1个10表示矩形起点的横坐标，第2个10表示起点的纵坐标，180表示矩形的长度，150表示矩形的高度。通过这4个参数，矩形即可绘制出来。运行结果如图1所示。 　　2.2 圆形绘制 　　要想绘制圆形，需要使用路径来勾勒图形轮廓。可以通过调用context对象的beginPath（）方法