HTML5 drawing a wall-like background

The most recently developed projects use HTML5 to draw various dashed lines, including Bezier dashes, round dashed lines, various imaginary segments, and various forms of background walls, as follows:

From this picture can be seen there are many forms of dashed and background wall, the following mainly introduce the wall-type background, as follows:

This background map has a certain pattern, you should first draw a rectangle, fill color is blue, and then draw the background wall above the rectangle.

The background wall is drawn in the following steps:

1. Draw Horizontal Line

2. Draw Vertical Line

3. Perform strokes

It is not troublesome to draw a vertical bar in the above three steps, but it is much easier to draw the background as shown:

This is to draw a vertical line, the width of the set can be looked very good. The following is the source of the drawing wall type:

/** * Draw Wall * @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++) {//Whether even number bar data 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)); }}//odd bar data else {for (var j = 0; j < indexy; j+=2) {Context.mo                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++) {Context.moveto (x,y+t*space);    Context.lineto (X+width,y+t*space);    } context.linewidth=1; Context.strokestyle=color?color: ' Red'; Context.stroke ();}

The drawing step can be clearly seen in the code above.

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

HTML5 drawing a wall-like background