js部分
| ! function() { | |
| function get_attribute(node, attr, default_value) { | |
| return node.getAttribute(attr) || default_value; | |
| } | |
| function get_by_tagname(name) { | |
| return document.getElementsByTagName(name); | |
| } | |
| //获取配置参数 | |
| function get_config_option() { | |
| var scripts = get_by_tagname(“script”), | |
| script_len = scripts.length, | |
| script = scripts[script_len – 1]; //当前加载的script | |
| return { | |
| l: script_len, //长度，用于生成id用 | |
| z: get_attribute(script, “zIndex”, -1), //z-index | |
| o: get_attribute(script, “opacity”, 0.5), //opacity | |
| c: get_attribute(script, “color”, “0,0,0”), //color | |
| n: get_attribute(script, “count”, 99) //count | |
| }; | |
| } | |
| //设置canvas的高宽 | |
| function set_canvas_size() { | |
| canvas_width = the_canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth, | |
| canvas_height = the_canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; | |
| } | |
| //绘制过程 | |
| function draw_canvas() { | |
| context.clearRect(0, 0, canvas_width, canvas_height); | |
| //随机的线条和当前位置联合数组 | |
| var e, i, d, x_dist, y_dist, dist; //临时节点 | |
| //遍历处理每一个点 | |
| random_lines.forEach(function(r, idx) { | |
| r.x += r.xa, | |
| r.y += r.ya, //移动 | |
| r.xa *= r.x > canvas_width || r.x < 0 ? -1 : 1, r.ya *= r.y > canvas_height || r.y < 0 ? -1 : 1, //碰到边界，反向反弹 | |
| context.fillRect(r.x – 0.5, r.y – 0.5, 1, 1); //绘制一个宽高为1的点 | |
| //从下一个点开始 | |
| for (i = idx + 1; i < all_array.length; i++) { | |
| e = all_array[i]; | |
| //不是当前点 | |
| if (null !== e.x && null !== e.y) { | |
| x_dist = r.x – e.x, //x轴距离 l | |
| y_dist = r.y – e.y, //y轴距离 n | |
| dist = x_dist * x_dist + y_dist * y_dist; //总距离, m | |
| dist < e.max && (e === current_point && dist >= e.max / 2 && (r.x -= 0.03 * x_dist, r.y -= 0.03 * y_dist), //靠近的时候加速 | |
| d = (e.max – dist) / e.max, | |
| context.beginPath(), | |
| context.lineWidth = d / 2, | |
| context.strokeStyle = “rgba(” + config.c + “,” + (d + 0.2) + “)”, | |
| context.moveTo(r.x, r.y), | |
| context.lineTo(e.x, e.y), | |
| context.stroke()); | |
| } | |
| } | |
| }), frame_func(draw_canvas); | |
| } | |
| //创建画布，并添加到body中 | |
| var the_canvas = document.createElement(“canvas”), //画布 | |
| config = get_config_option(), //配置 | |
| canvas_id = “c_n” + config.l, //canvas id | |
| context = the_canvas.getContext(“2d”), canvas_width, canvas_height, | |
| frame_func = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(func) { | |
| window.setTimeout(func, 1000 / 45); | |
| }, random = Math.random, | |
| current_point = { | |
| x: null, //当前鼠标x | |
| y: null, //当前鼠标y | |
| max: 20000 | |
| }, | |
| all_array; | |
| the_canvas.id = canvas_id; | |
| the_canvas.style.cssText = “position:fixed;top:0;left:0;z-index:” + config.z + “;opacity:” + config.o; | |
| get_by_tagname(“body”)[0].appendChild(the_canvas); | |
| //初始化画布大小 | |
| set_canvas_size(), window.onresize = set_canvas_size; | |
| //当时鼠标位置存储，离开的时候，释放当前位置信息 | |
| window.onmousemove = function(e) { | |
| e = e || window.event, current_point.x = e.clientX, current_point.y = e.clientY; | |
| }, window.onmouseout = function() { | |
| current_point.x = null, current_point.y = null; | |
| }; | |
| //随机生成config.n条线位置信息 | |
| for (var random_lines = [], i = 0; config.n > i; i++) { | |
| var x = random() * canvas_width, //随机位置 | |
| y = random() * canvas_height, | |
| xa = 2 * random() – 1, //随机运动方向 | |
| ya = 2 * random() – 1; | |
| random_lines.push({ | |
| x: x, | |
| y: y, | |
| xa: xa, | |
| ya: ya, | |
| max: 6000 //沾附距离 | |
| }); | |
| } | |
| all_array = random_lines.concat([current_point]); | |
| //0.1秒后绘制 | |
| setTimeout(function() { | |
| draw_canvas(); | |
| }, 100); | |
| }(); |
cs部分
| <p>[v_organge]知乎背景[/v_organge]</p> | |
| <pre class=”prettyprint linenums“> | |
| <style type=”text/css“> | |
| body { | |
| text-align: center; | |
| background: #F7FAFC; | |
| overflow: hidden; | |
| background: #fff; | |
| } | |
| </style></pre> | |
| <p><canvas id=”Mycanvas“></canvas> <script> | |
| //定义画布宽高和生成点的个数 | |
| var WIDTH = window.innerWidth, | |
| HEIGHT = window.innerHeight, | |
| POINT = 35;</p> | |
| <p> var canvas = document.getElementById(‘Mycanvas’); | |
| canvas.width = WIDTH, | |
| canvas.height = HEIGHT; | |
| var context = canvas.getContext(‘2d’); | |
| context.strokeStyle = ‘rgba(0,0,0,0.2)’, | |
| context.strokeWidth = 1, | |
| context.fillStyle = ‘rgba(0,0,0,0.1)’; | |
| var circleArr = [];</p> | |
| <p> //线条：开始xy坐标，结束xy坐标，线条透明度 | |
| function Line(x, y, _x, _y, o) { | |
| this.beginX = x, | |
| this.beginY = y, | |
| this.closeX = _x, | |
| this.closeY = _y, | |
| this.o = o; | |
| } | |
| //点：圆心xy坐标，半径，每帧移动xy的距离 | |
| function Circle(x, y, r, moveX, moveY) { | |
| this.x = x, | |
| this.y = y, | |
| this.r = r, | |
| this.moveX = moveX, | |
| this.moveY = moveY; | |
| } | |
| //生成max和min之间的随机数 | |
| function num(max, _min) { | |
| var min = arguments[1] || 0; | |
| return Math.floor(Math.random() * (max – min + 1) + min); | |
| } | |
| // 绘制原点 | |
| function drawCricle(cxt, x, y, r, moveX, moveY) { | |
| var circle = new Circle(x, y, r, moveX, moveY) | |
| cxt.beginPath() | |
| cxt.arc(circle.x, circle.y, circle.r, 0, 2 * Math.PI) | |
| cxt.closePath() | |
| cxt.fill(); | |
| return circle; | |
| } | |
| //绘制线条 | |
| function drawLine(cxt, x, y, _x, _y, o) { | |
| var line = new Line(x, y, _x, _y, o) | |
| cxt.beginPath() | |
| cxt.strokeStyle = ‘rgba(0,0,0,’ + o + ‘)’ | |
| cxt.moveTo(line.beginX, line.beginY) | |
| cxt.lineTo(line.closeX, line.closeY) | |
| cxt.closePath() | |
| cxt.stroke();</p> | |
| <p> } | |
| //每帧绘制 | |
| function draw() { | |
| context.clearRect(0, 0, canvas.width, canvas.height); | |
| for(var i = 0; i < POINT; i++) { | |
| drawCricle(context, circleArr[i].x, circleArr[i].y, circleArr[i].r); | |
| } | |
| for(var i = 0; i < POINT; i++) { | |
| for(var j = 0; j < POINT; j++) { | |
| if(i + j < POINT) { var A = Math.abs(circleArr[i + j].x – circleArr[i].x), B = Math.abs(circleArr[i + j].y – circleArr[i].y); var lineLength = Math.sqrt(A * A + B * B); var C = 1 / lineLength * 7 – 0.009; var lineOpacity = C > 0.03 ? 0.03 : C; | |
| if(lineOpacity > 0) { | |
| drawLine(context, circleArr[i].x, circleArr[i].y, circleArr[i + j].x, circleArr[i + j].y, lineOpacity); | |
| } | |
| } | |
| } | |
| } | |
| } | |
| //初始化生成原点 | |
| function init() { | |
| circleArr = []; | |
| for(var i = 0; i < POINT; i++) { | |
| circleArr.push(drawCricle(context, num(WIDTH), num(HEIGHT), num(15, 2), num(10, -10) / 40, num(10, -10) / 40)); | |
| } | |
| draw(); | |
| } | |
| //调用执行 | |
| window.onload = function() { | |
| init(); | |
| setInterval(function() { | |
| for(var i = 0; i < POINT; i++) { var cir = circleArr[i]; cir.x += cir.moveX; cir.y += cir.moveY; if(cir.x > WIDTH) cir.x = 0; | |
| else if(cir.x < 0) cir.x = WIDTH; if(cir.y > HEIGHT) cir.y = 0; | |
| else if(cir.y < 0) cir.y = HEIGHT; | |
| } | |
| draw(); | |
| }, 10); | |
| } | |
| </script></p> |
标题：《背景代码磁力小棍棍JS代码》作者：祖冬；学海无涯，欢迎大家分享，如有侵权请联系作者，本文链接：http://www.chinanumberone.net/uncategorized/258.html
微信扫一扫 
支付宝扫一扫 
