文件名称:
css3 HTML5 Canvas炫酷3D线条延伸动画特效.zip
开发工具:
文件大小: 16kb
下载次数: 0
上传时间: 2019-07-11
详细说明： js代码 [removed] ;(function() { use strict; var c = document.getElementById(c); var ctx = c.getContext(2d); var w = c.width = window.innerWidth; var h = c.height = window.innerHeight; var cx = w / 2; var cy = h / 2; var fl = 1000; function prj(obj) { var cz = obj.z fl; if(cz === 0) return; var scl = fl / cz; obj.p.x = cx obj.x * scl; obj.p.y = cy obj.y * scl; obj.s = scl; } var P = function(x, y, z) { this.x = x; this.y = y; this.z = z; this.s = 1; this.cl = 0; this.p = { x: 0, y: 0 }; }; P.prototype = { constructor: P, update: function() { this.z -= 30; }, render: function(ctx) { if(this.z <= -fl) return; ctx.save(); ctx.translate(this.p.x, this.p.y); ctx.scale(this.s, this.s); ctx.fillStyle = hsla( this.cl , 100%, 50%, 0.5); ctx.beginPath(); ctx.arc(0, 0, 2, 0, Math.PI * 2); ctx.fill(); ctx.restore(); } }; var M = function(x, y, z) { this.list = []; this.max = 100; this.x = x; this.y = y; this.z = z; this.s = 1; this.p = { x: 0, y: 0 }; this.ax = Math.random() * (Math.PI * 2); this.ay = Math.random() * (Math.PI * 2); this.rx = Math.random() * 100; this.ry = Math.random() * 100; this.cl = Math.random() * 360; this.cls = Math.random(); }; M.prototype = { constructor: M, update: function() { this.cl = this.cls; this.ax = Math.random() * 0.1 - 0.02; this.ay = Math.random() * 0.1 - 0.02; this.x = Math.cos(this.ax) * 100; this.y = Math.sin(this.ay) * 100; this.z = 10; if(this.z > fl) this.z = fl; if(this.list.length < this.max) { if(Math.random() * 100 < 50) { var pp = new P(this.x, this.y, this.z); pp.cl = this.cl; this.list.push(pp); } } else { var pp = this.list.shift(); pp.x = this.x; pp.y = this.y; pp.z = this.z; pp.cl = this.cl; this.list.push(pp); } }, render: function(ctx) { if(this.z <= -fl) return; ctx.save(); ctx.translate(this.p.x, this.p.y); ctx.fillStyle = green; ctx.beginPath(); ctx.arc(0, 0, 2, 0, Math.PI * 2); ctx.fill(); ctx.restore(); } }; function update(mv, list) { for(var i = 0; i < list.length; i ) { var p = list[i]; p.update(); prj(p); p.render(ctx); } for(var i = list.length-1; i >= 0; i--) { var p = list[i]; if(p.z <= -fl) continue; if(i === list.length - 1) { ctx.lineWidth = Math.random(); ctx.strokeStyle = hsl( mv.cl , 100%, 50%); ctx.beginPath(); ctx.moveTo(p.p.x, p.p.y); } else { ctx.lineTo(p.p.x, p.p.y); } } ctx.stroke(); } var ms = []; for(var i = 0; i < 10; i ) { ms.push(new M( Math.random() * 400 - 200, Math.random() * 400 - 200, Math.random() * 400 - 200)); } requestAnimationFrame(function loop() { requestAnimationFrame(loop); ctx.clearRect(0, 0, w, h); for(var i = 0; i < ms.length; i ) { var m = ms[i]; m.update(); prj(m); update(m, m.list); } }); })(); [removed] 这是一款基于HTML5 Canvas绘制的炫酷3D线条延伸动画特效，多彩颜色变幻，非常漂亮！
(系统自动生成,下载前可以参看下载内容)
下载文件列表
相关说明
- 本站资源为会员上传分享交流与学习,如有侵犯您的权益,请联系我们删除.
- 本站是交换下载平台，提供交流渠道，下载内容来自于网络，除下载问题外，其它问题请自行百度。
- 本站已设置防盗链，请勿用迅雷、QQ旋风等多线程下载软件下载资源，下载后用WinRAR最新版进行解压.
- 如果您发现内容无法下载，请稍后再次尝试；或者到消费记录里找到下载记录反馈给我们.
- 下载后发现下载的内容跟说明不相乎，请到消费记录里找到下载记录反馈给我们，经确认后退回积分.
- 如下载前有疑问，可以通过点击"提供者"的名字，查看对方的联系方式，联系对方咨询.
相关搜索:
