js canvas实现镜头背景模糊多彩圆圈移动效果代码-html代码-BFW代码库

js canvas实现镜头背景模糊多彩圆圈移动效果代码

代码语言：html

所属分类：背景

代码描述：js canvas实现镜头背景模糊多彩圆圈移动效果代码，模拟了夜晚镜头拍摄城市弥红灯背景模糊效果。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html>

<head>
    <style>
        body {
          background: #000;
          overflow: hidden;
        }
        
        canvas {
          bottom: 0;
          left: 0;
          position: absolute;
          right: 0;
          top: 0;
        }
        
        #c1 {
          opacity: 0;
        }
        
        #c2 {
          background: #000;
        }
    </style>
   
</head>

<body><canvas id="c1" ></canvas>
    <canvas id="c2" ></canvas>
    <script>
        var c1 = document.getElementById( 'c1' ),
        	ctx1 = c1.getContext( '2d' ),
        	c2 = document.getElementById( 'c2' ),
        	ctx2 = c2.getContext( '2d' ),
        	twopi = Math.PI * 2,
        	parts = [],
        	sizeBase,
        	cw,
        	opt,
        	hue,
        	count;
        
        function rand( min, max ) {
        	return Math.random() * ( max - min ) + min;
        }
        
        function hsla( h, s, l, a ) {
        	return 'hsla(' + h + ',' + s + '%,' + l + '%,' + a + ')';
        }
        	
        function create() {
        	sizeBase = cw + ch;
        	count = Math.floor( sizeBase * 0.3 ),
        	hue = rand( 0, 360 ),
        	opt = {
        		radiusMin: 1,
        		radiusMax: sizeBase * 0.04,
        		blurMin: 10,
        		blurMax: sizeBase * 0.04,
        		hueMin: hue,
        		hueMax: hue + 100,
        		saturationMin: 10,
        		saturationMax: 70,
        		lightnessMin: 20,
        		lightnessMax: 50,
        		alphaMin: 0.1,
        		alphaMax: 0.5
        	}
        	ctx1.clearRect( 0, 0, cw, ch );
        	ctx1.globalCompositeOperation = 'lighter';
        	while( count-- ) {
        		var radius = rand( opt.radiusMin, opt.radiusMax ),
        			blur = rand( opt.blurMin, opt.blurMax ),
        			x = rand( 0, cw ),
        			y = rand( 0, ch ),
        			hue = rand(opt.hueMin, opt.hueMax ),
        			saturation = rand( opt.saturationMin, opt.saturationMax ),
        			lightness = rand(  opt.lightnessMin, opt.lightnessMax ),
        			alpha = rand( opt.alphaMin, opt.alphaMax );
        
        		ctx1.shadowColor = hsla( hue, saturation, lightness, alpha );
    .........完整代码请登录后点击上方下载按钮下载查看