Html5 draws a background similar to a wall type. html5 draws a background.

Html5 draws a background similar to a wall type. html5 draws a background.

Recently developed projects use html5 to draw various dotted lines, including the besell dotted lines, circular dotted lines, various dotted lines, and various forms of background wall, as shown below:

From this picture, we can see that there are many forms of dotted lines and background walls. The following describes the background of the wall type, as shown below:

This background image has a certain pattern. First, you should draw a rectangle, fill the color in blue, and then draw the background wall on the rectangle.

The steps for drawing the background wall are as follows:

1. Draw a horizontal line

2. Draw a vertical line

3. Stroke

In the above three steps, it is not difficult to draw a vertical line, but it is much simpler if the background shown is drawn:

This is to draw a vertical line, the configured line width can look very good. The source code for drawing the wall type is as follows:

/*** Draw a 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 ++) {// if (isEven) {for (var j = 1; j <indexy; j + = 2) {context. moveTo (x + space * I, y + space * j); conte Xt. 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 ();}

The above Code clearly shows the draw steps.

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.