前言HTML是一种标记语言，由HTML标签元素和文本编写的文档可以被浏览器描述为网页。通常，一个网页的实现是由HTML、CSS和Javascript的组合来完成的。HTML负责网页的结构，CSS渲染网页元素的样式，Javascript为网页添加动态行为，比如响应用户行为。众所周知，在网络上作画是一件很头疼的事情。通常，开发者需要使用第三方插件来实现。目前，HTML5引入了canvas元素，可以通过JavaScript在页面上绘制线条、图形、添加文字和图像。一些绘图需求，但是还是存在兼容性问题，比如Firefox3.0+，Chrome3.0+支持，但是IE是9.0版本之后才开始支持的（如下图主流版本浏览器分布情况，IE8的应用还是很广泛的）。因此，本文介绍如何使用最基本的方式实现绘图。DOM简介由于图形是通过JavaScript动态生成的，在介绍实现方法之前，有必要提一下DOM（DocumentObjectModel），它是W3C组织推荐的处理可扩展标记语言（HTMLXML）的标准编程接口，它将文档中的对象以树形结构模型组织起来，因此整个文档被映射为一个由层次节点组成的文件，并以面向对象的方式描述了文件中对象的行为、属性以及对象之间的关系。可以通过JavaScript访问和操作HTML文档中的元素，例如动态地添加、删除和修改元素。如下图所示，每个方框是文档的一个节点，一共包括三种类型的节点。树的根是文档（Document）节点，代表整个文档，元素（Element）节点代表HTML中的元素。文本（Text）节点代表文本。同时，节点树中的节点之间存在层次关系。如下图所示，节点是根节点，再往上一层是
和节点。它们具有相同的父节点，属于同一级别的兄弟节点。等等。下面列出一些常用的DOM对象方法供大家参考（详细可以登录W3school网站查看）。实现绘图的方式主要是基于这些常用的方法。绘制图形的基本过程是将需要显示的元素节点逐个添加到页面的布局位置，操作包括：创建DOM节点varoDiv=document.createElement('div');添加样式：（样式对象属性设置Style/Class继承外部文件定义的样式）document.getElementById("id").style.property="value"object.className=classname插入DOM节点：（插入节点在父节点结束/插入节点到父节点的一个兄弟节点之前)document.body.appendChild(oDiv);//将div插入主体和末尾varoP=createElement('p');//创建p节点document.body.插入前（oP，oDiv）；//将p节点插入到div的最前面位置的定位排列：CSS的position属性建立了元素布局使用的定位机制，我们可以在页面任意位置显示元素，如图下图展示了position属性的参数值和用法。文字使用绝对定位方式，如left:100px;top:150px;表示该元素距页面左侧100px，距页面顶部150px。示例代码框的实现：三行框的布局为123，绝对定位的位置需要根据布局的要求进行定位。生成框后页面的HTML和CSS内容如下图所示。rootPen继承了btn-flat风格的特点，重新定义了一些参数。for(vark=0;k<3;k++){//三行topsize=150*k;左尺寸=600-65*k；for(varj=0;j