帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» canvas粒子连线效果
canvas粒子连线效果
浏览:655次
-
评论:0次
-
发布时间:2018-05-09
Html
Css
Js
body { background-color:#005CBA; margin:0; overflow:hidden; } #canvas { display:block; }
var total = 100; var size = 5; //半径 var x; var y; var arr = []; //点路径 var oldPoint; var PI = Math.PI; var canvas = document.getElementById('canvas'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; var ctx = canvas.getContext("2d"); ctx.strokeStyle = 'rgba(255,255,255,1)'; ctx.fillStyle = 'rgba(255,255,255,.5)'; ctx.lineWidth = 1; var opa = 0; vy = 25; vx = 0; gravity = 0.005; function distance(x1, y1, x2, y2) { return Math.sqrt(Math.abs(x1 - x2) * Math.abs(x1 - x2) + Math.abs(y1 - y2) * Math.abs(y1 - y2)); } //画点 for (var i = 0; i < total; i++) { var xx = Math.random() * canvas.width; var yy = Math.random() * canvas.height; arr.push({ x: xx, y: yy }); ctx.beginPath(); ctx.arc(xx, yy, size, 0, 2 * PI); ctx.fill(); ctx.save(); } oldPoint = arr; function drawPoint() { $.each(arr, function(i, m) { ctx.beginPath(); ctx.arc(m.x, m.y, size, 0, 2 * PI); ctx.fill(); ctx.save(); }) } function drawLine() { //画线 for (var i = 0; i < arr.length; i++) { for (var j = i + 1; j < arr.length; j++) { var juli = distance(arr[i].x, arr[i].y, arr[j].x, arr[j].y); if (juli >= 120) { opa = 0; } else { opa = (juli / 120).toFixed(1); opa = 1 - opa; } ctx.beginPath(); ctx.strokeStyle = 'rgba(255,255,255,' + opa + ')'; ctx.moveTo(arr[i].x, arr[i].y); ctx.lineTo(arr[j].x, arr[j].y); ctx.stroke(); } } } setInterval(function() { var xx = Math.random() * canvas.width; var yy = Math.random() * canvas.height; arr.push({ x: xx, y: yy }); }, 300) //循环动画 function loop() { //超出边界删除点 $.each(arr, function(i, m) { if (m) { if (m.x < 0 || m.x > canvas.width || m.y < 0 || m.y > canvas.height) { arr.splice(i, 1) } } }) var firsrArr = arr.slice(0, arr.length / 4); var secondArr = arr.slice(arr.length / 4, arr.length / 2); var thirdArr = arr.slice(arr.length / 2, arr.length * 3 / 4); var fourArr = arr.slice(arr.length * 3 / 4, arr.length); ctx.clearRect(0, 0, canvas.width, canvas.height); // 偏移 $.each(firsrArr, function(i, m) { m.x += 0.5; }) $.each(firsrArr, function(i, m) { m.y -= 0.3; }) $.each(secondArr, function(i, m) { m.y -= 0.25; }) $.each(secondArr, function(i, m) { m.x += 0.25; }) $.each(thirdArr, function(i, m) { m.x += 0.7; }) $.each(thirdArr, function(i, m) { m.y -= 0.1; }) $.each(fourArr, function(i, m) { m.y += 0.3; }) $.each(fourArr, function(i, m) { m.x -= 0.2; }) drawPoint(); drawLine(); window.requestAnimationFrame(loop); } window.requestAnimationFrame(loop);
↑上面代码改变,会自动显示代码结果
jQuery调用版本:
2.1.1
<!doctype html><html><head><meta charset="utf-8"><title>canvas粒子连线效果-www.sucainiu.com</title><script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script><style>
</style></head><body>
<script>
</script>
</body></html>
立即下载
收藏
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!
充值积分
充值会员
更多说明»
代码描述:canvas粒子运动背景图
此效果是通过canvas粒子运动,来达到连线的效果
canvas下雨效果
炫酷图片旋转效果
讨论这个常用代码(0)
回答他人问题或分享心得会奖励牛币
〒_〒 居然一个评论都没有……
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
655
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值