html设计一个图片墙,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+1));

}

}

isEven=!isEven;

}

for(var t= 0;t

{

context.moveTo(x,y+t*space);

context.lineTo(x+width,y+t*space);

}

context.lineWidth=1;

context.strokeStyle=color?color:'red';

context.stroke();

}

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