JS 实现万花筒特效 JS 原生代码
2017-03-22 19:36
337 查看
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { background: #190117; overflow: hidden; margin: 0; width: 100%; } </style> </head> <body> <script> window.requestAnimFrame = (function() { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60); }; })(); var obj = { rad: { base: 200, vary: 25, step: Math.PI / 360 }, c: { w: window.innerWidth, h: window.innerHeight }, lay: { num: 28, dist: 80, diff: Math.PI / 66 }, run: { int: 20 } }; function Circle(x, y, step) { this.x = x; this.y = y; this.step = step } Circle.prototype.draw = function($) { this.step += obj.rad.step; $.beginPath(); var r = obj.rad.base + Math.sin(this.step) * obj.rad.vary; $.arc(this.x, this.y, r, 0, 2 * Math.PI, true); $.fill(); } function init() { var d = obj.lay.dist, t = Math.PI / 3, x = obj.c.w / 2, y = obj.c.h / 2, clay = [ [new Circle(x, y, 0)] ], circ, lay, s, pt, ptx, pty, dx, dy; for (lay = 1; lay < obj.lay.num; lay++) { circ = []; for (s = 0; s < 6; s++) { ptx = x + d * lay * Math.cos(t * s); pty = y + d * lay * Math.sin(t * s); dx = d * Math.cos(t * s + t * 2); dy = d * Math.sin(t * s + t * 2); for (pt = 0; pt < lay; pt++) { circ.push(new Circle(ptx + dx * pt, pty + dy * pt, -1 * lay * obj.lay.diff)); } } clay.push(circ); } return clay; } var c = document.createElement('canvas'); c.width = obj.c.w; c.height = obj.c.h; document.body.appendChild(c); var $ = c.getContext('2d'); $.fillRect(0, 0, c.width, c.height); $.globalCompositeOperation = 'xor'; $.fillStyle = 'hsla(304, 95%, 75%, 1)'; c.addEventListener('load', resize); c.addEventListener('resize', resize, false); function resize() { c.width = w = window.innerWidth; c.height = h = window.innerHeight; c.style.position = 'absolute'; c.style.left = (window.innerWidth - w) * .01 + 'px'; c.style.top = (window.innerHeight - h) * .01 + 'px'; } var clay = init(); function run() { var i, j, ilen, jlen; $.clearRect(0, 0, obj.c.w, obj.c.h); for (i = 0, ilen = clay.length; i < ilen; i++) { for (j = 0, jlen = clay[i].length; j < jlen; j++) { clay[i][j].draw($); } } } function go() { run(); window.requestAnimFrame(go); } go(); </script> </body> </html>
相关文章推荐
- 原生js实现tab选项卡里内嵌图片滚动特效代码
- PhoneGap或者Cordova框架下实现Html5中JS调用Android原生代码
- JS实现新浪微博搜索框提示的特效代码
- js实现飞入星星特效代码
- 原生 JS 代码和用 jQuery 实现效果各有什么优劣势
- 原生js和jquery实现图片轮播特效
- 【荐】JS实现的图片弹性拖动特效代码
- 使用原生js实现页面蒙灰(mask)效果示例代码
- js实现飞入星星特效代码
- js实现图片轮番效果,原生代码
- 原生js与jQuery实现简单的tab切换特效对比
- 原生 JS 代码和用 jQuery 实现效果各有什么优劣势
- 原生js实现半透明遮罩层效果具体代码
- js实现tab页切换选项卡代码特效
- js实现图片向上连续滚动特效代码(含注释)
- 原生js 秒表实现代码
- 各大门户网站Flash和JS实现的图片幻灯片切换特效代码文件下载:
- PhoneGap或者Cordova框架下实现Html5中JS调用Android原生代码
- 原生JS写的一个书架式的图片缩放滚动展示特效代码
- 使用原生JS实现弹出层特效