Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
body { height: 100vh; display: grid; place-content: center; background: linear-gradient(90deg, #060a3f 0%,#2b60d7 100%); overflow: hidden; }
JavaScript
var canvas = document.querySelector('canvas'); var ctx = canvas.getContext('2d'); var squids = new Array(32); var bubbles = new Array(54); var t = 0; //create squids for (var i=0; i
innerWidth+d.r) d.x = -d.r; if (d.y<-d.r) d.y = innerHeight+d.r; if (d.y>innerHeight+d.r) d.y = -d.r; }; var animate = function () { t++; canvas.width = innerWidth; canvas.height = innerHeight; bubbles.forEach(function (b) { b.x += b.vx; b.y += b.vy; limit(b); ctx.fillStyle = 'rgba(255,255,255,'+b.o+')'; ctx.beginPath(); ctx.arc(b.x,b.y,b.r,Math.PI*2,0); ctx.fill(); }); squids.forEach(function (d) { var w = Math.sin((t+(d.r*100))/10); d.x += d.vx*4; d.y -= w+1; d.y += d.vy; limit(d); var color1 = 'rgba('+d.re+','+d.g+','+d.b+',0.4)'; var color2 = 'rgba('+d.re+','+d.g+','+d.b+',0.2)'; ctx.fillStyle = color1; ctx.beginPath(); ctx.arc(d.x,d.y,d.r,Math.PI+(-0.5+d.vx)-(w/4),(0.5+d.vx)+(w/4)); ctx.fill(); d.a.push({x:d.x,y:d.y-(d.r*0.2)}); if (d.a.length > d.r*3) d.a.splice(0, 1); d.a.forEach(function (p, i) { ctx.fillStyle = color2; ctx.fillRect(p.x,p.y,2,2); if (i > d.a.length/2) { ctx.fillRect(p.x-(d.r/4),p.y,2,2); ctx.fillRect(p.x+(d.r/4),p.y,2,2); } if (i > d.a.length/3) { ctx.fillRect(p.x+(d.r/10),p.y-10,2,2); ctx.fillRect(p.x-(d.r/10),p.y-10,2,2); } }); }); requestAnimationFrame(animate); }; animate();
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>canvas水母-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号