效果图只是截取了一个图片：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>小球连线-碰壁折回</title></head><body><canvas id="canvas"></canvas><script>var canvas = ElementById("canvas");var ctx = Context("2d");// 画布的尺寸// documentElement 属性以一个元素对象返回一个文档的文档元素// clientWidth实际宽度 此处写的是画布的实际宽度 减去30，这样避免小球超出画布范围canvas.width = document.documentElement.clientWidth - 30;canvas.height = document.documentElement.clientHeight -30;// 小球类// 不用写x y，因为此处的小球是固定的，是一个随机值（固定值）function Ball(){//随机数*画布的宽，则得到的最大值不会大于画布的宽this.x = parseInt(Math.random() * canvas.width);this.y = parseInt(Math.random() * canvas.height);this.r = 10;//此时小球的颜色是固定的，如果想要随机的颜色，可以将getRandom()解开注释，将下边的固定颜色注释掉lor = "gray";//lor = getRandom();// 设置小球在轴行进方向this.dx = parseInt(Math.random() * 10) - 5;// 设置小球在y轴行进方向this.dy = parseInt(Math.random() * 10) - 5;// 将小球存放到数组中ballArr.push(this);// 记录自己在数组中的位置 通过索引值this.index = ballArr.length-1;}var ballArr = [];// // 随机颜色// function getRandom(){// var allType = "0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f";// // 通过数组对它进行拼接// var allTypeArr = allType.split(",");// // 遍历和渲染// // 因为是16进制// var color = "#"// // i小于6是因为颜色的位数为6位// for(var i = 0;i<6;i++){// // 得到一个随机数// // Math.random获取一个随机数 parseInt解析字符串,返回一个整数// var random =parseInt( Math.random() * allTypeArr.length);// // 随机下标取随机数，并组合成颜色 拼接for循环外的color,形成一个随机组合的颜色// color += allTypeArr[random];// }// return color;// }// 小球的更新Ball.prototype.update = function(){// 小球的运动 行进方向this.x += this.dx;this.y += this.dy;// console.log(this.x,this.y);// 当小球出屏幕了，反弹。判断小于this.r是为了判断当前是否出屏幕if(this.x < this.r || this.x > canvas.width-this.r){this.dx = -this.dx}if(this.y < this.r || this.y > canvas.height-this.r){this.dy = -this.dy}}// 初始化渲染 // 小球的渲染der = function(){ctx.beginPath();//小球的透明度 1代表实心ctx.globalAlpha = 0.6;// 绘制小球ctx.arc(this.x,this.y,this.r,0,2 * Math.PI, false );ctx.fillStyle = lor;ctx.fill();
//如果不想要小球之间的连线可以将下边的for循环进行注释// 画线逻辑// 画线只画比自己大的一方就可以,否则每次两根线不好看for(var i = this.index;i<ballArr.length;i++){// Math.abs() 取绝对值if(Math.abs(ballArr[i].x - this.x) < 150 && Math.abs(ballArr[i].y - this.y) < 150){ctx.strokeStyle = "gray";ctx.beginPath();// 线的透明度,根据当前两个已经连线的小球的距离进行线的透明度设置// sqrt() 方法可返回一个数的平方根。// pow() 方法可返回 x 的 y 次幂的值。// ballArr[i].x - this.x 我自己的小球和对方小球的距离 2的意思是乘以2,开方可以得到一个数值ctx.globalAlpha = 10 / Math.sqrt(Math.pow(ballArr[i].x - this.x,2) + Math.pow(ballArr[i].y - this.y,2))console.log(10 / Math.sqrt(Math.pow(ballArr[i].x - this.x,2) + Math.pow(ballArr[i].y - this.y,2)))veTo(this.x,this.y);ctx.lineTo(ballArr[i].x,ballArr[i].y);ctx.closePath();ctx.stroke();}}}// 创建20个小球for( var i = 0 ;i<20;i++){new Ball()};// 定时器动画setInterval(function(){// 清除画布ctx.clearRect(0,0,canvas.width,canvas.height)for( var i = 0 ;i<ballArr.length;i++){ballArr[i].update();ballArr[i].render();};},20)</script><style>#canvas{border: 1px solid #0000FF;display: block;margin: 5px auto;}*{margin: 0;padding: 0;}</style></body>
</html>本文发布于:2024-01-27 20:06:32，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/17063571912358.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
