jquery实现canvas交织线条动画背景效果代码
代码语言:html
所属分类:背景
代码描述:jquery实现canvas交织线条动画背景效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html> <head> <meta charset="utf-8"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <style> html, body { background: #000; margin: 0; padding:0;} canvas { width: 100%; height: 100%; position: absolute; } /* Demo Buttons Style */ .codrops-demos { font-size: 0.8em; text-align:center; position:absolute; z-index:99; width:96%; } .codrops-demos a { display: inline-block; margin: 0.35em 0.1em; padding: 0.5em 1.2em; outline: none; text-decoration: none; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; border-radius: 2px; font-size: 110%; border: 2px solid transparent; color:#fff; } .codrops-demos a:hover, .codrops-demos a.current-demo { border-color: #383a3c; } </style> </head> <body> <canvas></canvas> <script> $(function(){ var canvas = document.querySelector('canvas'), ctx = canvas.getContext('2d') canvas.width = window.innerWidth; canvas.height = window.innerHeight; ctx.lineWidth = .3; ctx.strokeStyle = (new Color(150)).style; var mousePosition = { x: 30 * canvas.width / 100, y: 30 * canvas.height / 100 }; var dots = { nb: 750, distance: 50, d_radius: 100, array: [] }; function colorValue(min) { return Math.floor(Math.random() * 255 + min); } function createColorStyle(r,g,b) { return 'rgba(' + r + ',' + g + ',' + b + ', 0.8)'; } function mixComponents(comp1, weight1, comp2, weight2) { return (comp1 * weight1 + comp2 * weight2) / (weight1 + weight2); } function averageColorStyles(dot1, dot2) { var color1 = dot1.color, color2 = dot2.color; var r = mixComponents(color1.r, dot1.radius, color2.r, dot2.radius), g = mixComponents(color1.g, dot1.radius, color2.g, dot2.radius), b = mixComponents(color1.b, dot1.radius, color2.b, dot2.radius); return createColorStyle(Math.floor(r), Math.floor(g), Math.floor(b)); } function Color(min) { min = min || 0; this.r = colorValue(min); this.g = colorValue(min); this.b = colorValue(min); this.style = createColorStyle(this.r, this.g, this.b); } function Dot(){ this.x = Math.random() * canvas.width; this.y = Math.random() * canvas.hei.........完整代码请登录后点击上方下载按钮下载查看
网友评论0