首页 > 代码库 > html5
html5
<!DOCTYPE html> <html lang="en"><head> <meta charset="utf-8"/> <title>云镜</title> <style type="text/css"> body { background: #000; min-height: 580px; color: #fff; font: normal 13px/26px "Libre Baskerville",serif; font-smooth: always; -webkit-font-smoothing: antialiased; } #experience { perspective: 800px; width: 100%; min-height: 580px; overflow: hidden; position: relative; z-index: 20; } #lines { position: absolute; top: 0; left: 0; z-index: 30; pointer-events: none; opacity: .55; } </style></head><body> <div id="experience"> <canvas id="lines"></canvas> </div></body><script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script><script> var experience = { page : null, resize: null, init : function(){ // SET if($(‘#lines‘).length){ this.setLines(); } }, setLines : function(){// console.log(this); this.canvas = document.querySelector(‘canvas‘); var ctx = this.canvas.getContext(‘2d‘), color = ‘#ffffff‘; //控制颜色 this.canvas.width = window.innerWidth; this.canvas.height = window.innerHeight; this.canvas.style.display = ‘block‘; ctx.fillStyle = color; ctx.lineWidth = .2; //线条粗细，1018修改为.2，本来是.1 ctx.strokeStyle = color; //线条颜色 /*控制resize后的canvas*/ this.resize = function(){ experience.canvas.width = window.innerWidth; experience.canvas.height = window.innerHeight; ctx.fillStyle = color; ctx.lineWidth = .1; ctx.strokeStyle = color; }; $(window).on(‘resize‘, experience.resize); /*控制resize后的canvas End*/ var mousePosition = { //开始时线条集合中心点的位置 x: 30 * experience.canvas.width / 100, y: 30 * experience.canvas.height / 100 }; var dots = { nb: 250, //效果中点个数 distance: 80, //distance代表当星星之间的距离是多少时连接产生线条 d_radius: 150, //控制可显示的线条的区域大小 array: [] //点和线的集合的数组 }; function Dot(){ //Dot函数对象是代表的是点，被实例化了点的个数次 this.x = Math.random() * experience.canvas.width; //表示点的在DOM加载完成时的初始水平位置，如果是个常量，则所有点都在一个位置，产生的效果类似烟花爆炸的效果,另外，无论初始在哪里，所有的点最终都会散布开来，要不然不会有烟花效果 this.y = Math.random() * experience.canvas.height; //表示点的在DOM加载完成时的初始垂直位置，如果是个常量，则所有点都在一个位置，产生的效果类似烟花爆炸的效果,另外，无论初始在哪里，所有的点最终都会散布开来，要不然不会有烟花效果 this.vx = -.5 + Math.random(); this.vy = -.5 + Math.random(); this.radius = Math.random(); //控制点的圆大小 } Dot.prototype = { //绘制点的圆 create: function(){ ctx.beginPath(); //beginPath() 方法开始一条路径，或重置当前的路径 ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false); //arc() 方法创建弧/曲线（用于创建圆或部分圆） ctx.fill(); //fill() 方法填充当前的图像（路径）。默认颜色是黑色。如果路径未关闭，那么 fill() 方法会从路径结束点到开始点之间添加一条线，以关闭该路径，然后填充该路径。 } }; Dot.animate = function(){ var i, dot; for(i = 0; i < dots.nb; i++){ dot = dots.array[i]; if(dot.y < 0 || dot.y > experience.canvas.height){ dot.vx = dot.vx; dot.vy = - dot.vy; } else if(dot.x < 0 || dot.x > experience.canvas.width){ dot.vx = - dot.vx; dot.vy = dot.vy; } dot.x += dot.vx; dot.y += dot.vy; } }; /*绘制线条的核心算法*/ Dot.line = function(){ var i, j, i_dot, j_dot; for(i = 0; i < dots.nb; i++){ for(j = 0; j < dots.nb; j++){ i_dot = dots.array[i]; j_dot = dots.array[j]; if((i_dot.x - mousePosition.x) < dots.d_radius && (i_dot.y - mousePosition.y) < dots.d_radius && (i_dot.x - mousePosition.x) > - dots.d_radius && (i_dot.y - mousePosition.y) > - dots.d_radius){ if((i_dot.x - j_dot.x) < dots.distance && (i_dot.y - j_dot.y) < dots.distance && (i_dot.x - j_dot.x) > - dots.distance && (i_dot.y - j_dot.y) > - dots.distance){ ctx.beginPath(); ctx.moveTo(i_dot.x, i_dot.y); //moveTo() 方法把路径移动到画布中的指定点，不创建线条。 ctx.lineTo(j_dot.x, j_dot.y); //lineTo() 方法添加一个新点，然后创建从该点到画布中最后指定点的线条（该方法并不会创建线条）。 ctx.stroke(); //stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色 ctx.closePath(); //closePath() 方法创建从当前点到开始点的路径。 } } } } }; function createDots(){ var i; ctx.clearRect(0, 0, experience.canvas.width, experience.canvas.height); //clearRect()方法清空给定矩形内的指定像素。 if(dots.array.length < 1) { //在没有dot的条件下，创建对应dot数的dot for(i = 0; i < dots.nb; i++){ dots.array.push(new Dot()); } } for(i = 0; i < dots.nb; i++){ var dot = dots.array[i]; dot.create(); } Dot.line(); Dot.animate(); } /*绘制线条的核心算法 End*/ $(‘#experience‘).on(‘mousemove mouseleave‘, function(e){ if(e.type == ‘mousemove‘){ mousePosition.x = e.pageX; mousePosition.y = e.pageY; } if(e.type == ‘mouseleave‘){ mousePosition.x = experience.canvas.width / 2; //回归到未移入之前的位置 mousePosition.y = experience.canvas.height / 2; //回归到未移入之前的位置 } }); this.interval = setInterval(createDots, 1000/30); //控制线条变化的速度 }, destroy : function() { if(this.interval) { clearInterval(this.interval); //清除setnterval } if(experience.resize){ $(window).on(‘resize‘, experience.resize); } } }; experience.init();</script> </html>
html5
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。