html5 绘制类似墙型的背景

最近开发的项目中要使用html5绘制各种虚线包括贝塞尔虚线、圆形虚线、各种虚线段，还包括各种形式的背景墙，截图如下：

从这张图片中可以看出有很多种形式的虚线和背景墙，下面主要介绍一下墙型背景，如下如：

                                                                                                             

这中背景图有一定的规律，首先应该绘制一个矩形，填充色为蓝色，然后在矩形上面绘制背景墙。

背景墙的绘制步骤如下：

1、绘制横线

2、绘制竖线

3、进行描边

上述三个步骤中不叫麻烦的是绘制竖线，但是如果绘制过下图所示的背景就简单很多了：

                                                                                                                    

这个就是绘制竖线了，设置好的线宽就能看起来很不错了。下面给出绘制墙型的源码：

/** * 绘制墙 * @param context * @param x * @param y * @param width * @param height * @param color */function drawWall(context,x,y,width,height,color){    var space = 5;    var indexx = width/space;    var indexy = height/space;    var isEven =false;    context.beginPath();    for (var i = 0; i < indexx; i++) {        //是否偶数条数据        if(isEven)        {            for (var j = 1; j < indexy; j+=2) {                context.moveTo(x + space * i, y + space * j);                context.lineTo(x + space * i, y + space * (j+1));            }        }        //奇数条数据        else        {            for (var j = 0; j < indexy; j+=2) {                context.moveTo(x + space * i, y + space * j);                context.lineTo(x + space * i, y + space * (j+1));            }        }        isEven=!isEven;    }    for(var t= 0;t<indexy;t++)    {        context.moveTo(x,y+t*space);        context.lineTo(x+width,y+t*space);    }    context.lineWidth=1;    context.strokeStyle=color?color:'red';    context.stroke();}

在上面的代码中可以很明确的看出绘制步骤。