Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
body { background: #000; overflow: hidden; } canvas { bottom: 0; left: 0; margin: auto; position: absolute; right: 0; top: 0; }
JavaScript
//点击任意位置重新生成 var c = document.querySelector( 'canvas' ), ctx = c.getContext( '2d' ), w = 800, h = 600, standers = [], walkers = [], PI = Math.PI, TAU = PI * 2, count = 0, countMax = 800, iterations = 50, radius = 12, angleType = true, startHue, rangeHue, stop, raf, dpr; function rand( min, max ) { return Math.random() * ( max - min ) + min; } function dist( p1, p2 ) { var dx = p2.x - p1.x, dy = p2.y - p1.y; return Math.sqrt( dx * dx + dy * dy ); } function Walker( x, y, r, color, standing ) { count++; this.x = x; this.y = y; this.r = r; this.color = color || '#fff'; this.standing = standing || false; } Walker.prototype.step = function( i ) { if( this.standing ) { return; } this.x += rand( -this.r * 2, this.r * 2 ); this.y += rand( -this.r * 2, this.r * 2 ); this.x = Math.min( w, Math.max( 0, this.x ) ); this.y = Math.min( h, Math.max( 0, this.y ) ); var j = standers.length; while( j-- ) { var other = standers[ j ], compDist = this.r + other.r; if( dist( this, other ) <= compDist && !this.standing ) { var distOrigin = dist( this, standers[ 0 ] ); this.standing = true; this.r = Math.max( 1, radius - ( distOrigin / ( w / 2 ) ) * radius * 1.1 ); var hue = startHue + ( distOrigin / w ) * rangeHue; this.color = 'hsla(' + hue + ', 100%, 60%, 1)'; var dx = other.x - this.x var dy = other.y - this.y; var angle = Math.atan2( dy, dx ); this.hitAngle = angle; standers.push( this ); walkers.splice( i, 1 ); } } }; Walker.prototype.draw = function( final ) { if( final ) { ctx.fillStyle = this.color; ctx.save(); var size = this.r * 2; ctx.translate( this.x, this.y ); ctx.rotate( rand( 0, TAU ) ); ctx.shadowBlur = this.r * 10; ctx.shadowColor = this.color; ctx.globalAlpha = 0.2; ctx.fillRect( -size / 2, -size / 2, size, size ); ctx.restore(); ctx.strokeStyle = this.color; ctx.lineWidth = this.r * 1; ctx.beginPath(); ctx.moveTo( this.x, this.y ); var dx = this.x - w / 2; var dy = this.y - h / 2; var angle = Math.atan2( dy, dx ); if( angleType ) { angle = this.hitAngle; } var x = this.x + Math.cos( angle ) * this.r * 3; var y = this.y + Math.sin( angle ) * this.r * 3; ctx.lineTo( x, y ); ctx.shadowBlur = this.r * 10; ctx.shadowColor = this.color; ctx.globalAlpha = 0.75; ctx.stroke(); } else { ctx.rect( this.x, this.y, 2, 2 ); } }; function init() { cancelAnimationFrame( raf ); angleType = !angleType; startHue = rand( 0, 360 ); rangeHue = rand( 90, 360 ); stop = false; count = 0; dpr = window.devicePixelRatio; c.width = w * dpr; c.height = h * dpr; c.style.width = w + 'px'; c.style.height = h + 'px'; ctx.scale(dpr, dpr); walkers.length = 0; standers.length = 0; standers.push( new Walker( w / 2, h / 2, radius, 'hsl(' + startHue + ', 100%, 50%)', true )); loop(); } function step() { if( !stop && count < countMax - 1 ) { walkers.push( new Walker( rand( 0, 1 ) < 0.5 ? 0 : w, rand( 0, 1 ) < 0.5 ? 0 : h, radius )); } var i = standers.length; while( i-- ) { standers[ i ].step( i ); } var j = walkers.length; while( j-- ) { walkers[ j ].step( j ); } } function draw( final ) { ctx.clearRect( 0, 0, w, h ); if( final ) { ctx.globalCompositeOperation = 'lighter'; } var i = standers.length; while( i-- ) { if( final ) { standers[ i ].draw( final ); } else { ctx.beginPath(); standers[ i ].draw(); ctx.fillStyle = '#fff'; ctx.fill(); } } var j = walkers.length; while( j-- ) { if( final ) { walkers[ j ].draw(); } else { ctx.beginPath(); walkers[ j ].draw(); ctx.fillStyle = '#fff'; ctx.fill(); } } } function loop() { if( !stop ) { raf = requestAnimationFrame( loop ); } draw() for( var i = 0; i < iterations; i++ ) { step(); if( standers.length > countMax - 2 ) { stop = true; cancelAnimationFrame( raf ); draw( true ); break; } } } init(); addEventListener( 'click', init );
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>扩散有限聚合-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号