在讨论JavaScript画线技术时，我们通常会涉及到两个不同的方法：使用HTML的矢量标记语言（VML）和使用HTML5的画布元素（Canvas）。接下来将详细介绍这两种方法的实例代码。
### VML技术在IE浏览器下的应用
在早些版本的IE浏览器中，画线可以通过嵌入VML代码来实现。VML是微软推出的一种矢量图形标记语言，允许在网页上绘制图形。在HTML中使用VML需要指定XML命名空间，例如示例代码中的`xmlns:v="urn:schemas-microsoft-com:vml"`。这段代码展示了如何创建一个简单的红色线条：
```html
<v:line
from='200,200'
to='300,100'
style='position:absolute;z-index:8'>
</v:line>
```
通过定义`from`和`to`属性，可以指定线条的起点和终点坐标。`style`属性则负责设置线条的位置和层叠顺序。
除此之外，还可以使用JavaScript来动态创建VML元素。例如，下面的JavaScript函数`createLine`接受起始点坐标（`startX`, `startY`）和结束点坐标（`endX`, `endY`），然后创建并返回一个`v:line`元素：
```javascript
var R = function() {};
R.prototype.createLine = function(startX, startY, endX, endY) {
var le = document.createElement("<v:line></v:line>");
le.from = startX + ',' + startY;
le.to = endX + ',' + endY;
le.strokecolor = "red";
le.strokeweight = "1pt";
return le;
};
var d = new R();
document.body.appendChild(d.createLine(1, 1, 200, 100));
```
### Canvas技术在现代浏览器中的应用
HTML5的Canvas元素提供了一种通过JavaScript在网页上绘制图形的方式。一个`<canvas>`元素只是一个矩形区域，并没有实际的绘图能力。要进行绘图，需要使用JavaScript中的Canvas API来绘制形状。
示例中给出了一个完整的HTML5画布示例，通过`<canvas>`元素定义了一个画布区域，并在JavaScript中通过`getContext`方法获取到该画布的绘图上下文。然后使用该上下文绘图对象来绘制矩形和线条：
```javascript
var canvas = document.getElementById('tutorial');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
// 绘制填充矩形
ctx.fillRect(25, 25, 100, 100);
// 清除矩形区域
ctx.clearRect(45, 45, 60, 60);
// 绘制矩形边框
ctx.strokeRect(50, 50, 50, 50);
// 绘制线条
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(200, 250);
ctx.lineTo(50, 250);
ctx.closePath();
ctx.stroke();
} else {
alert('您需要Safari或Firefox 1.5+才能看到此示例。');
}
```
- `fillRect(x, y, width, height)` 方法用于绘制一个填充的矩形。
- `clearRect(x, y, width, height)` 方法用于清除画布上指定的矩形区域。
- `strokeRect(x, y, width, height)` 方法用于绘制一个矩形的边框。
- `beginPath()` 开始路径记录。之后的绘图命令将被记录下来，用以执行`stroke()`或`fill()`。
- `moveTo(x, y)` 将画笔移动到指定的坐标(x, y)。
- `lineTo(x, y)` 绘制一条从当前位置到新位置的直线。
- `closePath()` 创建从当前点回到起始点的路径。
- `stroke()` 实际上绘制之前定义好的路径。
在现代浏览器中，画布技术已经成为实现复杂图形和动画的首选技术，因为它的性能和灵活性都大大优于VML。
在介绍的示例代码中，虽然包含了一些技术过时的内容（如VML支持），但仍然是为了阐述在不同技术环境下实现绘图的不同方法。随着技术的发展，虽然VML的使用变得不再普遍，但是 Canvas API 依然被广泛使用，并且还在不断地发展和完善之中。开发者应当掌握这些基本的绘图技术，以便在不同的场景下灵活运用。
