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

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

版权声明：本文为博主原创文章，未经博主允许不得转载。