HTML5网页电子画板的设计与实现

李伙钦

（福建船政交通职业学院信息工程系 福建 福州 350007）

0 引言

随着信息技术的迅猛发展，上网已成为很多人生活中必不可少的一部分，人们通过网站获取资讯，下载影音，社交通信等，其得益于HTML的标准化，网页可以无障碍的在各种平台各种操作系统上运行。上一版本的HTML标准是2001的XHTML1.1标准，十几年来一直没有更新，渐渐跟不上用户的需求了。最新的HTML5标准应运而生，为我们带来了强大的用于交互、多媒体和本地化等方面的标签以及应用编程接口。

HTML5一个非常实用的特性是用于绘画的Canvas元素，Canvas拥有多种绘制路径、矩形、圆形、字符以及图像处理的方法，为网页绘图及图像处理带来了便捷。

本文介绍了HTML5的特性及Canvas元素的相关概念，然后介绍采用Canvas制作网页电子画板的设计思路，分析其设计步骤及注意事项。

本文的组织结构，第一章介绍HTML5概念，第二章介绍设计总体思路，第三章介绍详细设计，最后总结。

1 第一章 相关技术

1.1 HTML5

HTML标准自1999年12月发布的 HTML 4.01后，后继的HTML 5和其它标准被束之高阁，为了推动web标准化运动的发展，一些公司联合起来，成立了一个叫做WHATWG(Web超文本应用技术工作组）的组织，HTML5草案的前身名为 Web Applications 1.0，于2004年被 WHATWG提出，于2007年被 W3C接纳，并成立了新的 HTML工作团队。HTML 5的第一份正式草案已于2008年1月22日公布。HTML 5有两大特点：首先，强化了 Web网页的表现性能。其次，追加了本地数据库等Web应用的功能。

HTML5中的一些有趣的新特性：

1.1.1 用于绘画的 canvas元素

1.1.2 用于媒介回放的 video和 audio元素

1.1.3 对本地离线存储的更好的支持

1.1.4 新的特殊内容元素，比如 article、footer、header、nav、section

1.1.5 新的表单控件，比如calendar、date、time、email、url、search

1.2 Canvas

HTML5定义了元素作为位图画布在浏览器中的相关解决方案，它用于渲染图形，游戏图像或者其他飞行中的视觉图形。一个Canvas代表了页面中的一个矩形区域，在这个区域里面，你可以用Javascript来画你想画的任何东西。HTML5定义了一系列的方法用来画图形，定位路径，创建渐变以及将图形变形。

HTML5 Canvas的功能让人自然联想到Flash，同样用来绘制图像和动画，Flash目前的产品成熟度和用户接受度都是很高的，Flash无论是在矢量图还是位图的绘制上效率都略高于HTML5 Canvas。HTML5 Canvas的优势主要在无须另外安装插件即可播放，与网页其他元素的容易融合协作。

2 第二章 设计总体思路

网页电子画板主要用于涂鸦、绘画、对图像网页进行标注等，总体思路是网页中设置一个div层，在该层中添加Canvas元素作为画板，然后添加几个绘画工具按钮（如画笔、直线、圆、矩形、取色板、线条大小）。

按下画笔按钮是自由绘画状态，可以用鼠标自由绘画；按下直线、圆、矩形按钮绘制相应的图像；按下取色板弹出一个浮动层，该浮动层中也包含一个Canvas元素，绘制出取色板的各种颜色，通过点击取色板区域获取颜色值；按下线条大小按钮，弹出一个浮动层，该浮动层中包含一个下拉菜单，用于设置线条的粗细值。

为了实现对图像网页等进行批注，将画板所在的层也设置成浮动层，然后在网页中添加一个iframe元素和文本框，在文本框中输入网址或者本地图像地址，通过Javascript动态设置iframe的src属性，实现图像和网址的动态载入。画板漂浮在iframe之上，这样就可以对图像或者网页进行批注了。

对于图像的保存，将每笔绘画的参数都记录下来，然后通过Ajax提交到服务器上。

3 第三章 详细设计

3.1 创建画布

3.2 自由绘画

鼠标按下（mousedown事件）开始绘画，线条跟随鼠标坐标移动，鼠标弹起 （mouseup事件）结束绘画。绘画核心Javascript代码如下：

3.3 绘制直线

与自由绘画类似，区别在于自由绘画是线条跟随鼠标移动，而画直线在鼠标按下时获取起始点坐标，鼠标移动过程中不进行绘画，等到鼠标弹起时获取目标点坐标，然后才根据这两个点绘制直线。代码与自由绘画的核心代码一样。

3.4 绘制圆

画圆在鼠标按下时获取圆点坐标，鼠标移动过程中不进行绘画，等到鼠标弹起时获取目标点坐标，然后计算半径大小，最后根据圆点坐标和半径大小绘制圆。绘画核心Javascript代码如下：

3.5 绘制矩形

画矩形，也是采用类似直线的两点方式，鼠标按下获取矩形的左上角坐标，鼠标弹起获取矩形的右下角坐标，长和宽根据两点坐标相减获得。

3.6 取色板

取色板是采用矩形填充方式生成的，从红色渐变到绿色，再渐变到蓝色。取色则是根据鼠标按下的坐标，换算成相应的RGB值，然后设置主画布2D渲染对象的strokeStyle。以下是生成取色板的Javascript代码：

3.7 设置线条大小

设置线条大小比较简单，就是将下来框获取到的值赋值给主画布2D渲染对象的lineWidth属性。Javascript代码如下:

3.8 iframe 动态载入

通过设置iframe的src值，实现iframe内容的动态载入。Javascript代码如下:

4 总结

本文介绍了HTML5的特性，提出使用Canvas进行网页电子画板设计的设计思路及具体实现，实践证明绘制图形效果良好。HTML5作为下一代HTML标准，将来将为我们带来更多的惊喜。