Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
html { background: #1f1e1c; } body { overflow:hidden; }
JavaScript
var voronoi = (function(){ /**************** * Object Voronoi */ var Voronoi = function (){ this.canvas = null; this.sites = null; this.nbParticles = null; this.speed = null; this.voronoi = null; }; Voronoi.prototype.init = function(classCanvas, nbParticle){ this.canvas = document.querySelector(classCanvas), context = this.canvas.getContext("2d"), width = window.innerWidth, height = window.innerHeight; this.canvas.width = window.innerWidth; this.canvas.height = window.innerHeight; window.addEventListener("resize", this.onResize.bind(this), false); /* Nb Particles */ this.nbParticles = nbParticle; /* Speed Particles */ this.speed = []; for(var i=0; i
window.innerWidth) { this.speed[i].x *= -1; } if(this.sites[i][1] < 0 || this.sites[i][1] > window.innerHeight) { this.speed[i].y *= -1; } this.sites[i][0] += this.speed[i].x; this.sites[i][1] += this.speed[i].y; } }; Voronoi.prototype.redraw = function(){ var voronoi = d3.voronoi() .extent([[-1, -1], [width + 1, height + 1]]); var diagram = voronoi(this.sites); var polygons = diagram.polygons(); context.clearRect(0, 0, width, height); context.beginPath(); /* Gradient */ var gradient = context.createLinearGradient(0, 0, window.innerWidth, 0); gradient.addColorStop("0", "#e72150"); gradient.addColorStop("1", "#46bfee"); /* DrawCells */ var h; for (h = 0, n = polygons.length; h < n; ++h) this.drawCell(polygons[h]); context.lineWidth=2; context.strokeStyle = gradient; context.stroke(); }; Voronoi.prototype.drawCell = function(cell){ if (!cell) return false; context.moveTo(cell[0][0], cell[0][1]); for (var j = 1, m = cell.length; j < m; ++j) { context.lineTo(cell[j][0], cell[j][1]); } context.closePath(); return true; }; Voronoi.prototype.draw = function(){ requestAnimationFrame(this.draw.bind(this)); this.rebondOnScreen(); this.redraw(); }; Voronoi.prototype.onResize = function(){ this.canvas = document.querySelector(".canvas"); this.canvas.width = window.innerWidth; this.canvas.height = window.innerHeight; width = canvas.width; height = canvas.height; this.sites = d3.range(this.nbParticles) .map(function(d) { return [Math.random() * window.innerWidth, Math.random() * window.innerHeight]; }); }; return Voronoi; })(); //Launcher var myVoronoi = new voronoi(); myVoronoi.init(".canvas", 400);
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>d3.js 动画-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号