html5 绘制类似墙型的背景

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) {veTo(x + space * i, y + space * j);context.lineTo(x + space * i, y + space * (j+1));}}//奇数条数据else{for (var j = 0; j < indexy; j+=2) {veTo(x + space * i, y + space * j);context.lineTo(x + space * i, y + space * (j+1));}}isEven=!isEven;}for(var t= 0;t<indexy;t++){veTo(x,y+t*space);context.lineTo(x+width,y+t*space);}context.lineWidth=1;context.strokeStyle=color?color:'red';context.stroke();
}