不久之前我发过一篇帖子，介绍如何用JavaScript在网页上绘制随机迷宮。当时迷宮是用 DOM 元素 div 堆出来的，通过控制一个个绝对定位的 div 的上、下、左、右四个边框形成了一个个的格子。最近学习了一下 HTML5，试着用 canvas 元素改进了一下，使得迷宮在支持 canvas 标签的浏览器（如Firefox、Chrome）下用 canvas 绘制，不支持 canvas 标签的浏览器（如IE6/7/8）下仍然使用原来的DOM绘制。

首先我们需要检测浏览器是否支持 canvas 标签，检测的方法很简单：

var canvas = document.createElement("canvas");
var is_canvas_valid = !! canvas.getContext;

先尝试创建一个 canvas 元素，再获取它的 getContext 属性，如果浏览器不支持 canvas 标签，创建的元素的 getContext 属性为 undefined，我们知道，JavaScript 中，在任意值前面加两个感叹号可以将其转换为对应的布尔值。这样，我们就能知道浏览器是否支持 canvas 标签了，并且在后面的绘制过程中调用不同的方法。

然后，在 mg.js 中，我新添加了 _showByDOM 和 _showByCanvas 两个方法，其中 _showByDOM 中即是原来使用 div 绘图的方法，_showByCanvas 中则是新添加的使用 canvas 标签画迷宮的代码。关键部分如下：

// 创建canvas标签
this.canvas = document.createElement("canvas");

// 设置canvas的宽度和高度
this.canvas.setAttribute("width", w);
this.canvas.setAttribute("height", h);

// 将canvas节点添加到DOM树
this.ob.appendChild(this.canvas);

// 取得绘图上下文，这儿使用的是2D绘图
var ctx = this.canvas.getContext("2d");
// 设置填充色
ctx.fillStyle = "#f5f5f5";
// 设置画布背景色（画一个大的实心矩形）
ctx.fillRect(0, 0, w, h);

接下来就是循环，绘制每个格子的四条边，如下：

// 设置画笔颜色，注意和上面的设置填充色不同
ctx.strokeStyle = "#333333";
// 设置画笔粗细
ctx.lineWidth = 0.5;

// 画线方法
var _d = function (x1, y1, x2, y2) {
	// 开始路径
	ctx.beginPath();
	// 画笔移动到起始点
	ctx.moveTo(x1, y1);
	// 画一条直线到点(x2, y2)
	ctx.lineTo(x2, y2);
	// 调用了这个方法后，线条才会真正出现在画布上
	ctx.stroke();
	// 关闭路径
	ctx.closePath();
};

// 根据当前格子的值，确定其上、下、左、右四条边的状态
if (!(v & 1))
	_d(ix, iy, ix2, iy);
if (!(v & 2))
	_d(ix2, iy, ix2, iy2);
if (!(v & 4))
	_d(ix, iy2, ix2, iy2);
if (!(v & 8))
	_d(ix, iy, ix, iy2);

其中如何根据当前格子的值算出其四条边的状态请参见上一篇帖子。

有一点让我不太满意的是线条粗细似乎最细只能是 2px，当把线条的 lineWidth 值设得更小（比如 0.5）时，线条不会继续变细，只会变淡。不知道是不是还有其他设置，或者要画更细的线条时只能通过直接操纵像素来完成？（在 HTML5 Canvas 中画线条需要注意，如果起点、终点都是整数数值，画出来的线条宽度至少为 2px，要画出 1px 的线条，需要指定起点、终点为一个以 0.5 结尾的小数。相关说明可以看这儿。）

下图是使用 canvas 绘制的效果：

最后，再贴一下这个迷宮游戏的地址：https://oldj.net/static/maze/maze.html。:-)

• 前传：一
• 后续：三