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();
}

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