[WEB]知乎登录背景——html/css/js实现
来源:互联网 发布:php计算数组重复 编辑:程序博客网 时间:2024/05/19 02:18
一.源代码
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>IFE JavaScript Task 01</title> </head> <style> html,body{ width:100%; height:100%; overflow:hidden; } </style><body><canvas id="Mycanvas"></canvas><script type="text/javascript">//定义画布宽高和生成点的个数 var WIDTH = window.innerWidth; var HEIGHT = window.innerHeight; var POINT = 35; var canvas = document.getElementById('Mycanvas'); canvas.width = WIDTH; canvas.height = HEIGHT; var context = canvas.getContext('2d'); context.strokeStyle = 'rgba(0,0,0,0.04)', context.strokeWidth = 1, context.fillStyle = 'rgba(0,0,0,0.08)'; var circleArr = []; //线条:开始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(); } //初始化生成原点 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(); } //每帧绘制 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); } } } } } //调用执行 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(); }, 16); }</script></body></html>
二.实现
参考网址:http://en.jsrun.net/UUpKp/edit
阅读全文
0 0
- [WEB]知乎登录背景——html/css/js实现
- html+css+js实现火影背景切换登录页面
- [知乎]HTML-CSS-JS-PHP
- HTML+CSS实现动态背景登录页面
- html5canvas:教你实现知乎登录动态粒子背景
- html5canvas:教你实现知乎登录动态粒子背景
- python 爬虫——登录知乎
- Html+css+js+jquery实现简单页面登录
- HTML+CSS----IE6下背景透明实现-css/js--png图片
- html+css实现登录界面
- 知乎动态背景
- Web前端:HTML~CSS~JS
- Java爬虫——模拟登录知乎
- js+html+css实现简单页面交互功能(2015知乎前端笔试题)http://v.youku.com/v_show/id_XMTI0ODQ5NTAyOA==.html?from=y1.7-1.2
- 模拟登录-知乎
- Python4--登录知乎
- 登录知乎
- 爬虫登录知乎
- linux 企业高扩展分区
- springmvc返回拼接的json字符串乱码问题
- 常见的HTML中的特殊字符和CSS尺寸单位
- 处理百万级数据提高查询速度的方法
- Binder应用层架构--AIDL从自动生成到手动编写
- [WEB]知乎登录背景——html/css/js实现
- ACTIVITI在LINUX下查看流程图片中文字体出现乱码的解决方案
- raw nand flash 与emmc nand flash的区别
- 抓取猫眼电影排行榜前100
- JAVA判断中文汉字以及中文标点
- git命令常用速查表
- 阿里云短信服务
- 聊聊Web App、Hybrid App与Native App的设计差异
- Java基础学习总结(五)—— 异常处理