canvas小球连线碰撞效果 html+css+js

先看效果（完整代码在底部）：

canvas小球连线碰撞完整源代码 html+css+js

这是我的B站地址~热烈欢迎

实现（看注释，可一步一步跟着实现）：

0：定义标签：

 <h1>北极光之夜。</h1><canvas id="canvas"></canvas>

1. 定义变量：

  /* 获取画布 */var canvas = document.querySelector("#canvas");var ctx = canvas.getContext("2d");/* 数组，存小球 */var arr = [];/* 一共60个球 */var num = 60;/* xZou与yZou为鼠标坐标，temp为变量，判断鼠标是否在canvas内 */var xZou,yZou,temp;

2.绑定窗口大小发生改变事件，让canvas随时铺满浏览器可视区，直接copy用：

   /* 绑定窗口大小发生改变事件，让canvas随时铺满浏览器可视区 */window.onresize=resizeCanvas;function resizeCanvas(){canvas.width=window.innerWidth;canvas.height=window.innerHeight;arr.length = 0;chushi();}resizeCanvas();

3. 初始化数组：

  /* 初始化数组 */function chushi(){for(let i=0;i<num;i++){arr.push({/*指定值之间的随机数: Math.random() * (max - min) + min; *//* 球的x轴随机坐标 */x:10+Math.random()*(canvas.width-20),/* 球的y轴随机坐标 */y:10+Math.random()*(canvas.height-20),/* 球的半径，可以设置随机大小，我就不设置了 */r:10,/* 球移动距离大小 dx，dy */dx:10*Math.random()-5,dy:10*Math.random()-5,/* 颜色，这是蓝色 */color: "rgba(7, 156, 255,1)"})}}

4. 绘制小球与连线：

 /* 绘制小球 */function draw(){for(let i=0;i<num;i++){var yuan = arr[i];/* 绘制圆形 */ctx.beginPath();ctx.arc(yuan.x,yuan.y,yuan.r,0,3.14*2,false);ctx.fillStyle = yuan.color;ctx.fill();for(let j=i;j<num;j++){/* 绘制球与球之间连线，只有x轴与y轴都只相差150内的才连线 */if(Math.abs(yuan.x-arr[j].x)<150&&Math.abs(yuan.y-arr[j].y)<150){/* 绘制连线 */ctx.beginPath();/* ctx.globalAlpha = 0.1; */ctx.moveTo(yuan.x,yuan.y);/* 绘制鼠标坐标与球之间连线，只有x轴与y轴都只相差150内的才连线 */if(Math.abs(yuan.x-xZou)<150&&Math.abs(yuan.y-yZou)<150&&temp){ctx.lineTo(xZou,yZou);}ctx.lineTo(arr[j].x,arr[j].y); ctx.closePath();/* 设置线条颜色，越远透明度越低，用勾股定理判断距离 */let tm = Math.sqrt(Math.abs(yuan.x-arr[j].x)*Math.abs(yuan.x-arr[j].x) + Math.abs(yuan.y-arr[j].y)*Math.abs(yuan.y-arr[j].y)) / 212;ctx.strokeStyle = `rgba(7, 156, 255,${1-tm})`;ctx.stroke();/*  ctx.fill(); */}}}}

Math.abs（）返回绝对值。
Math.sqrt（）返回平方根。

5. 更新小球运动：

 /* 小球运动 */function updates(){for(let i=0;i<num;i++){/* 更新球的坐标，鼠标坐标与球之间只有x轴与y轴都只相差150内的球才会跟着鼠标走 */if(Math.abs(arr[i].x-xZou)<150&&Math.abs(arr[i].y-yZou)<150&&temp){/* 离鼠标越近走越慢 */arr[i].x += -(arr[i].x-xZou)/(10*Math.random()+20);arr[i].y += -(arr[i].y-yZou)/(10*Math.random()+20);}/* 否则球走的距离与方向为原数组里存放的 */else{arr[i].x += arr[i].dx; arr[i].y += arr[i].dy; }/* 当球边碰到窗口边时把原来走的距离设置为负数，这样小球会碰撞效果 */if(arr[i].x<=arr[i].r || arr[i].x >= (canvas.width - arr[i].r) ){arr[i].dx = -arr[i].dx;}if(arr[i].y<=arr[i].r || arr[i].y >= (canvas.height - arr[i].r) ){arr[i].dy = -arr[i].dy;}}}

6. 设置定时器:

 /* 定时器，开始清除，渲染，更新 */chushi();setInterval(function(){ctx.clearRect(0,0,canvas.width,canvas.height);draw();updates();},50)

7. 鼠标进入离开canvas事件：

 /* 鼠标进入canvas事件， */var xZou,yZou,temp;canvas.addEventListener('mousemove',function(e){/* 赋值 */xZou = e.clientX;yZou = e.clientY;temp=1;})/* 鼠标离开canvas，tmep为0，上面的跟随鼠标运动无效了 */canvas.addEventListener('mouseout',function(e){temp=0;})

完整代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}body{height: 100vh;display: flex;justify-content: center;align-items: center;background-color: rgb(11, 10, 46);}h1{font-family: 'fangsong';position: absolute;font-size: 5em;color: rgb(17, 167, 226);transform: translateX(40px);text-shadow: 0 0 10px rgb(38, 17, 226),0 0 20px rgb(38, 17, 226),0 0 30px rgb(38, 17, 226);user-select: none;}</style>
</head>
<body><h1>北极光之夜。</h1><canvas id="canvas"></canvas><script>/* 获取画布 */var canvas = document.querySelector("#canvas");var ctx = canvas.getContext("2d");/* 数组，存小球 */var arr = [];/* 一共60个球 */var num = 60;/* xZou与yZou为鼠标坐标，temp为变量，判断鼠标是否在canvas内 */var xZou,yZou,temp;/* 绑定窗口大小发生改变事件，让canvas随时铺满浏览器可视区 */window.onresize=resizeCanvas;function resizeCanvas(){canvas.width=window.innerWidth;canvas.height=window.innerHeight;arr.length = 0;chushi();}resizeCanvas(); /* 初始化数组 */function chushi(){for(let i=0;i<num;i++){arr.push({/*指定值之间的随机数: Math.random() * (max - min) + min; *//* 球的x轴随机坐标 */x:10+Math.random()*(canvas.width-20),/* 球的y轴随机坐标 */y:10+Math.random()*(canvas.height-20),/* 球的半径，可以设置随机大小，我就不设置了 */r:10,/* 球移动距离大小 dx，dy */dx:10*Math.random()-5,dy:10*Math.random()-5,/* 颜色，这是蓝色 */color: "rgba(7, 156, 255,1)"})}}/* 绘制小球 */function draw(){for(let i=0;i<num;i++){var yuan = arr[i];/* 绘制圆形 */ctx.beginPath();ctx.arc(yuan.x,yuan.y,yuan.r,0,3.14*2,false);ctx.fillStyle = yuan.color;ctx.fill();for(let j=i;j<num;j++){/* 绘制球与球之间连线，只有x轴与y轴都只相差150内的才连线 */if(Math.abs(yuan.x-arr[j].x)<150&&Math.abs(yuan.y-arr[j].y)<150){/* 绘制连线 */ctx.beginPath();/* ctx.globalAlpha = 0.1; */ctx.moveTo(yuan.x,yuan.y);/* 绘制鼠标坐标与球之间连线，只有x轴与y轴都只相差150内的才连线 */if(Math.abs(yuan.x-xZou)<150&&Math.abs(yuan.y-yZou)<150&&temp){ctx.lineTo(xZou,yZou);}ctx.lineTo(arr[j].x,arr[j].y); ctx.closePath();/* 设置线条颜色，越远透明度越低，用勾股定理判断距离 */let tm = Math.sqrt(Math.abs(yuan.x-arr[j].x)*Math.abs(yuan.x-arr[j].x) + Math.abs(yuan.y-arr[j].y)*Math.abs(yuan.y-arr[j].y)) / 212;ctx.strokeStyle = `rgba(7, 156, 255,${1-tm})`;ctx.stroke();/*  ctx.fill(); */}}}}/* 小球运动 */function updates(){for(let i=0;i<num;i++){/* 更新球的坐标，鼠标坐标与球之间只有x轴与y轴都只相差150内的球才会跟着鼠标走 */if(Math.abs(arr[i].x-xZou)<150&&Math.abs(arr[i].y-yZou)<150&&temp){/* 离鼠标越近走越慢 */arr[i].x += -(arr[i].x-xZou)/(10*Math.random()+20);arr[i].y += -(arr[i].y-yZou)/(10*Math.random()+20);}/* 否则球走的距离与方向为原数组里存放的 */else{arr[i].x += arr[i].dx; arr[i].y += arr[i].dy; }/* 当球边碰到窗口边时把原来走的距离设置为负数，这样小球会碰撞效果 */if(arr[i].x<=arr[i].r || arr[i].x >= (canvas.width - arr[i].r) ){arr[i].dx = -arr[i].dx;}if(arr[i].y<=arr[i].r || arr[i].y >= (canvas.height - arr[i].r) ){arr[i].dy = -arr[i].dy;}}}/* 定时器，开始清除，渲染，更新 */chushi();setInterval(function(){ctx.clearRect(0,0,canvas.width,canvas.height);draw();updates();},50)/* 鼠标进入canvas事件， */var xZou,yZou,temp;canvas.addEventListener('mousemove',function(e){/* 赋值 */xZou = e.clientX;yZou = e.clientY;temp=1;})/* 鼠标离开canvas，tmep为0，上面的跟随鼠标运动无效了 */canvas.addEventListener('mouseout',function(e){temp=0;})</script></body>
</html>

总结：

夏天到了~~

canvas小球连线碰撞效果 html+css+js相关推荐

canvas文字粒子效果 html+css+js 3点饮茶，7点放工，美滋滋~
先言: 今天3点多在饮茶的时候,发现有好几天没水文章了,但是太难的玩意又不会啊,咋办,突然想起电脑里还有存着一个文字粒子特效,好家伙,这不就来了,先看效果如下: 因为gif图最大5m,但是这东西演示 ...
文字烟雾效果 html+css+js
先看效果(源码在最后): 网上看到了这个效果,觉得很有趣,所以也实现下,并不难,过程如下: 实现过程: 1.定义p标签: <p class="text"><一个青 ...
打字机效果 html+css+js
效果(最后有源码): 实现: 1. 定义标签,文本将写在span标签里,文本先在js的数组存着: <h1><span class="text" ></ ...
基于Canvas的画线动画效果
想着用js实现一个画线动画,借助Canvas实现了.动画效果: 手机端访问 https://sagitarioo.github.io/Personal/htmlCode/linePaint/lineS ...
canvas实现点线动画效果
效果图需求分析点随机产生并向随机方向以随机的速度匀速移动未点击时,点的总数保持不变:点击时在点击的位置产生数个新的点点与点之间在一定距离内有细线连接鼠标在画面中移动时,能够与其他点产生互动 ...
html的window效果,HTML+CSS+JS模仿win10亮度调节效果
HTML+CSS+JS模仿win10亮度调节效果代码模仿win10的亮度调节 .control_bar{ height:200px; width:500px; border-bottom:3px ...
vue+canvas 小球连线——碰壁折返
学习案例,记录一下 <template><div><canvas ref="myCanvas" width="800" heigh ...
原生js实现移动端京东首页搜索框、菜单栏滑动弹回、倒计时、banner动画、缓慢返回顶部效果(HTML+CSS+JS)
一.实现效果二.实现功能搜索框滑动固定,伸缩动画菜单栏左右滑动,超出区域自动弹回 banner自动轮播,手指左右滑动,滑动距离一半以内自动弹回,超过一半自动跳到下一张,圆点跟随显示颜色,以及实现 ...
文字图片视差效果 html+css+js
话不多,先看效果: 这是我在网上看到的一外国博主的创意,感觉不错,马上自己也敲了一个,果然不错~ 实现: 1.先定义一段文字,多点,起码能超过浏览器的可视区: <section><p ...

canvas小球连线碰撞效果 html+css+js

先看效果（完整代码在底部）：

实现（看注释，可一步一步跟着实现）：

完整代码：

总结：

canvas小球连线碰撞效果 html+css+js相关推荐

最新文章

热门文章