Canvas colorful striped background

See the Pen Canvas stripes by haiqing wang (@ whqet) onCodePen.

Shows the effect. The color is random.

Canvas makes colorful stripes, html is very simple.

<canvas id="canvas" class="opacity04" width="550" height="310">Your browser does not support the HTML5 Canvas element.</canvas>

CSS is also very simple, mainly to achieve 100% display of the Color Bar background and modify the border.

html, body {   background-color: #272727;   padding: 0px;   margin: 0px;   overflow: hidden;}canvas {   border: rgba(0,0,0,.1) solid 2px;}.opacity04{     -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; /* ie8  */    filter:alpha(opacity=40);    /* ie5-7  */    opacity: 0.4;    /* css standard, currently it works in most modern browsers  */} 

The javascript code is as follows:

$ (Function () {// initialize the variable to obtain the canvas and its width and height. var canvas = document. getElementById ('canvas '); var c = canvas. getContext ('2d '); var width = canvas. width = window. innerWidth; var height = canvas. height = window. innerHeight; // sets the stripe width var lineWidth = 10; // draws a black background, which is invisible in the final effect. c. fillStyle = "rgba (0, 0, 0, 1.0)"; c. fillRect (0, 0, width, height); // use a loop to draw a color bar for (var I = 0; I <width; I = I + lineWidth) {c. beginPath (); c. lineWidth = lineWidth; c. strokeStyle = '#' + Math. floor (Math. random () * 16777215 ). toString (16); c. moveTo (I, 0); c. lineTo (I, height); c. stroke ();}});

In this way, clear edges can be drawn. In this example, the blur filter is used to beautify the effect, and the blur filter uses the High-Level quasimondo effect. Add js references in html.

<script type="text/javascript" src="http://www.quasimondo.com/BoxBlurForCanvas/FastBlur.js"></script>

Add the blur filter in JS to implement the blur effect of canvas.

$ (Function () {// initialize the variable to obtain the canvas and its width and height. var canvas = document. getElementById ('canvas '); var c = canvas. getContext ('2d '); var width = canvas. width = window. innerWidth; var height = canvas. height = window. innerHeight; // sets the stripe width var lineWidth = 10; // draws a black background, which is invisible in the final effect. c. fillStyle = "rgba (0, 0, 0, 1.0)"; c. fillRect (0, 0, width, height); // use a loop to draw a color bar for (var I = 0; I <width; I = I + lineWidth) {c. beginPath (); c. lineWidth = lineWidth; c. strokeStyle = '#' + Math. floor (Math. random () * 16777215 ). toString (16); c. moveTo (I, 0); c. lineTo (I, height); c. stroke () ;}// you can call the canvas blur filter of an advanced user by calling the following // tackBlurCanvasRGBA (targetCanvasID, top_x, top_y, width, height, radius); // or: stackBlurCanvasRGB (targetCanvasID, top_x, top_y, width, height, radius); boxBlurCanvasRGBA ("canvas", 0, 0, width, height, 20, 1 );});

You can go to my codepen to modify and try it online, or download this effect from favorites.

---------------------------------------------------------------
Front-end development of whqet, focus on web Front-end development technology, and share webpage-related resources.
---------------------------------------------------------------