canvas小球连线-碰壁折返

2024-01-24 13:59
文章标签 canvas 小球 连线 碰壁 折返

本文主要是介绍canvas小球连线-碰壁折返，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

效果图只是截取了一个图片：
在这里插入图片描述

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>小球连线-碰壁折回</title></head><body><canvas id="canvas"></canvas><script>var canvas = document.getElementById("canvas");var ctx = canvas.getContext("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()解开注释，将下边的固定颜色注释掉this.color = "gray";//this.color = 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}}// 初始化渲染      // 小球的渲染Ball.prototype.render = function(){ctx.beginPath();//小球的透明度 1代表实心ctx.globalAlpha = 0.6;// 绘制小球ctx.arc(this.x,this.y,this.r,0,2 * Math.PI, false );ctx.fillStyle = this.color;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)))ctx.moveTo(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>

这篇关于canvas小球连线-碰壁折返的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/639918。

相关文章

12个小球 梅氏砝码问题

12个小球 梅氏砝码问题

1. 12个小球，其中有一个是坏球。有一架天平。需要你用最少的称次数来确定哪个小球是坏的并且它到底是轻还是重。 来源：http://blog.csdn.net/pongba/article/details/2544933 这个问题是一道流传已久的智力题。网络上也有很多讲解，还有泛化到N个球的情况下的严格证明。也有零星的一些地方提到从信息论的角度来看待最优解法。本来我一直认
阅读更多...
Android 自定义View控件，实现跟随手指触摸移动的小球

Android 自定义View控件，实现跟随手指触摸移动的小球

Android UI组件是通过继承View类，然后绘制内容，比如ImageView，TextView等组件都是继承View类。 当Android系统提供的组件功能不能满足需求时，可以通过继承View类重写一个或多个方法，派生自定义的组件，View类常用重写方法： 1.构造器：View子类最基本的重写方法 protected voidonDraw(Canvas canvas) public
阅读更多...
影响画布微信小程序canvas及skyline和webview用户界面布局的关键流程

影响画布微信小程序canvas及skyline和webview用户界面布局的关键流程

影响微信小程序画布canvas及skyline和webview用户界面布局的关键流程 目录 影响微信小程序画布canvas及skyline和webview用户界面布局的关键流程 一、微信小程序canvas开发流程 1.1、官方指南 1.2、客制化开发 第一步：在 WXML 中添加 canvas 组件 第二步：获取 Canvas 对象和渲染上下文 第三步 画布#ID选择器执行回调——
阅读更多...
Android canvas save restore saveLayer的异同点

Android canvas save restore saveLayer的异同点

一、基础操作 drawText、drawRect、drawColor等 对于这些基础操作，相信每一个安卓开发者都能说上个一二点出来，这些就不多做介绍，api 工程师必备技能之一。 在进阶之前，先回答这个问题：    问：canvas既然大家都理解为画布，那如果先在画布上绘制了某些内容，然后再canvas.rotate旋转了画布，为什么这些已经绘制在画布上的内容不会跟随着旋转？    答：由此可
阅读更多...
自定义View-Canvas

自定义View-Canvas

转载自：https://www.jianshu.com/p/f69873371763 Android Canvas 方法总结 简介 在自定义 View的时候，我们经常需要绘制一些自己想要的效果。 这里就需要使用Canvas对象。 下面将Canvas对象常用方法做个笔记，方便记忆。 对Canvas进行操作 对Canvas的一系列操作，是指对Canvas进行旋转、平移、缩放等操作。 这些操作可以
阅读更多...
canvas-实现放大镜效果

canvas-实现放大镜效果

canvas-实现放大镜效果 目录 文章目录 前言推荐阅读代码展示结果展示 前言 本文为canvas实现放大镜逻辑简单，适合作为基础项目练手 推荐阅读 《H5 canvas核心技术》 代码展示 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Comp
阅读更多...
canvas-原生js实现时钟绘图效果

canvas-原生js实现时钟绘图效果

canvas-原生js实现时钟绘图效果 目录 文章目录 前言代码效果查看 前言 本文为canvas实现时钟效果可直接复制使用 代码 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta n
阅读更多...
js-基于AudioContext在canvas上显示声音波形

js-基于AudioContext在canvas上显示声音波形

js-基于AudioContext在canvas上显示声音波形 目录 文章目录 前言效果展示代码展示`index.html``Aud.js` 前言 从ES7后开始启用AudioContex常用API是：createScriptProcessor, onaudioprocess, getChannelData注意：onaudioprocess已经废弃，开始改用Analyse
阅读更多...
【Canvas与纹饰】环形小蜜蜂纹饰

【Canvas与纹饰】环形小蜜蜂纹饰

【成图】 【代码】 <!DOCTYPE html><html lang="utf-8"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><head><title>环形小蜜蜂纹饰</title><style type="text/css">.centerlize{margin:0 auto;
阅读更多...
Web前端 lucky-canvas【大转盘 九宫格 老虎机】抽奖插件（适用JS/TS、Vue、React、微信小程序、Uniapp和Taro）

Web前端 lucky-canvas【大转盘 九宫格 老虎机】抽奖插件（适用JS/TS、Vue、React、微信小程序、Uniapp和Taro）

Web前端 lucky-canvas 抽奖插件（JS/TS、Vue、React、微信小程序、Uniapp和Taro） 基于 JS + Canvas 实现的【大转盘 & 九宫格 & 老虎机】抽奖，致力于为 WEB 前端提供一个功能强大且专业可靠的营销组件，只需要通过简单配置即可实现自由化定制，帮助你快速的完成产品需求 自由配置 奖品 / 文字 / 图片 / 颜色 / 按钮均可自由配置；支持同步
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2