【鸡年大吉】，不知道写点啥，放个demo（小球碰撞）吧，有兴趣的看看

最初的想法是仿写win7的泡泡屏保效果，但是对于小球的斜碰问题一直没搞明白（如果你会这个，欢迎留言或者做个demo），所以只是简单处理了碰撞后的速度，有时候会看起来很搞笑~~~funny guy

话不多说，先上demo

https://win7killer.github.io/can_ps/src/demo/ball.html

效果如下：

code:

  1 <!DOCTYPE html>
  2 <html lang="zh">
  3
  4 <head>
  5     <meta charset="UTF-8">
  6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8     <title>Document</title>
  9     <style>
 10         * {
 11             margin: 0;
 12             padding: 0;
 13         }
 14
 15         html {
 16             height: 100%;
 17         }
 18
 19         body {
 20             width: 100%;
 21             height: 100%;
 22             background: #333;
 23             background: url(./img/6.jpg) no-repeat 0 0;
 24             background-size: cover;
 25         }
 26
 27         canvas {
 28             display: block;
 29         }
 30     </style>
 31 </head>
 32
 33 <body>
 34     <canvas id="can" width=0 height=0></canvas>
 35     <script>
 36         var ballsNum = 20;
 37         window.onload = function() {
 38
 39             var can = document.getElementById(‘can‘);
 40             can.width = document.body.offsetWidth;
 41             can.height = document.body.offsetHeight;
 42             var ctx = can.getContext(‘2d‘);
 43             var ballR = Math.floor(can.height / 15);
 44             ctx.shadowColor = ‘rgba(0,0,0,.3)‘;
 45             ctx.shadowOffsetX = ballR / 5;
 46             ctx.shadowOffsetY = ballR / 5;
 47             // ctx.shadowBlur = ballR / 10 > 5 ? ballR / 10 : 5;
 48             ctx.shadowBlur = 16;
 49
 50             var aObj = randomBall(ballsNum);
 51             var raf = window.requestAnimationFrame(loop);
 52
 53             function loop() {
 54                 ctx.clearRect(0, 0, can.width, can.height);
 55                 for (var i = 0, l = aObj.length; i < l; i++) {
 56                     fnChange(aObj[i]);
 57                     checkPeng(aObj, i);
 58                 }
 59                 if (raf) {
 60                     raf = window.requestAnimationFrame(loop);
 61                 }
 62             }
 63
 64             //  改变圆心坐标
 65             function fnChange(obj) {
 66                 drawArc(obj);
 67                 obj.x += obj.sx * 10 / 4;
 68                 obj.y += obj.sy * 5 / 4;
 69
 70                 if (obj.x >= can.width - ballR) {
 71                     obj.x = can.width - ballR;
 72                     obj.sx = -1 * obj.sx;
 73                 } else if (obj.x <= ballR) {
 74                     obj.x = ballR;
 75                     obj.sx = -1 * obj.sx;
 76                 }
 77                 if (obj.y >= can.height - ballR) {
 78                     obj.y = can.height - ballR;
 79                     obj.sy = -1 * obj.sy;
 80                 } else if (obj.y <= ballR) {
 81                     obj.y = ballR;
 82                     obj.sy = -1 * obj.sy;
 83                 }
 84             }
 85             //画圆
 86             function drawArc(obj) {
 87                 ctx.save();
 88                 ctx.beginPath();
 89                 ctx.arc(obj.x % can.width, obj.y % can.height, ballR, 0, 2 * Math.PI);
 90                 ctx.closePath();
 91
 92                 var grd = ctx.createRadialGradient(obj.x - ballR * 3 / 10, obj.y - ballR * 4 / 10, ballR / 8, obj.x - ballR * 4 / 10, obj.y - ballR * 4 / 10, ballR * 16 / 10);
 93                 grd.addColorStop(0, "rgba(255,255,255,1)");
 94                 grd.addColorStop(1, obj.scolor);
 95                 ctx.fillStyle = grd;
 96                 ctx.fill();
 97                 ctx.restore();
 98             }
 99
100             function randomBall(num) {
101                 var barr = [];
102                 var ball;
103                 for (var i = 0; i < num || 0; i++) {
104                     ball = {};
105                     ball.x = Math.random() * (can.width - ballR * 2) + ballR;
106                     ball.y = Math.random() * (can.height - ballR * 2) + ballR;
107                     ball.sx = Math.random() * 6 - 6 / 2;
108                     ball.sy = Math.random() * 6 - 6 / 2;
109                     var scr = Math.round(Math.random() * 200 + 50);
110                     var scg;
111                     var scb;
112                     if (scr > 200) {
113                         if (Math.random() > 1) {
114                             scg = Math.round(Math.random() * 150 + 50);
115                             scb = Math.round(Math.random() * 200 + 50);
116                         } else {
117                             scb = Math.round(Math.random() * 150 + 50);
118                             scg = Math.round(Math.random() * 200 + 50);
119                         }
120                     } else {
121                         scg = Math.round(Math.random() * 200 + 50);
122                         scb = Math.round(Math.random() * 200 + 50);
123                     }
124                     ball.scolor = ‘rgba(‘ + [scr, scg, scb, 1].join(‘,‘) + ‘)‘;
125                     barr.push(ball);
126                 }
127                 return barr;
128             }
129
130             //碰撞检测
131             function checkPeng(arr, i) {
132                 var j, len;
133
134                 for (j = 0, len = arr.length; j < len; j++) {
135                     if (i === j) {
136                         continue;
137                     }
138                     var ca = {
139                         x: arr[i].x - arr[j].x,
140                         y: arr[i].y - arr[j].y
141                     }
142                     var z = Math.sqrt(Math.pow(ca.x, 2) + Math.pow(ca.y, 2));
143                     var cha = z - ballR * 2;
144                     if (cha <= 0) {
145                         if (arr[i].x < arr[j].x) {
146                             arr[i].x += cha;
147                         } else {
148                             arr[i].x += -cha;
149                         }
150                         if (arr[i].y < arr[j].y) {
151                             arr[i].y += cha;
152                         } else {
153                             arr[i].y += -cha;
154                         }
155                         //arr[i].sy = -1*arr[i].sy;
156                         var iTY = arr[i].sy;
157                         arr[i].sy = 1 * arr[j].sy;
158                         arr[j].sy = iTY;
159                         //arr[i].sx = -1*arr[i].sx;
160                         var iTX = arr[i].sx;
161                         arr[i].sx = 1 * arr[j].sx;
162                         arr[j].sx = iTX;
163                     }
164                 }
165             }
166         }
167     </script>
168 </body>
169
170 </html>

然后是加强版的透明泡泡

https://win7killer.github.io/can_ps/src/demo/ball_1.html

效果如下：

code：

  1 <!DOCTYPE html>
  2 <html lang="zh">
  3
  4 <head>
  5     <meta charset="UTF-8">
  6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8     <title>Document</title>
  9     <style>
 10         * {
 11             margin: 0;
 12             padding: 0;
 13         }
 14
 15         html {
 16             height: 100%;
 17         }
 18
 19         body {
 20             width: 100%;
 21             height: 100%;
 22             background: #333;
 23             background: url(./img/6.jpg) no-repeat 0 0;
 24             background-size: cover;
 25         }
 26
 27         canvas {
 28             display: block;
 29         }
 30     </style>
 31 </head>
 32
 33 <body>
 34     <canvas id="can" width=0 height=0></canvas>
 35     <script>
 36         var ballsNum = 20;
 37         window.onload = function() {
 38
 39             var can = document.getElementById(‘can‘);
 40             can.width = document.body.offsetWidth;
 41             can.height = document.body.offsetHeight;
 42             var ctx = can.getContext(‘2d‘);
 43             var ballR = Math.floor(can.height / 15);
 44             ctx.shadowColor = ‘rgba(0,0,0,.3)‘;
 45             ctx.shadowOffsetX = ballR / 5;
 46             ctx.shadowOffsetY = ballR / 5;
 47             // ctx.shadowBlur = ballR / 10 > 5 ? ballR / 10 : 5;
 48             ctx.shadowBlur = 16;
 49
 50             var aObj = randomBall(ballsNum);
 51             var raf = window.requestAnimationFrame(loop);
 52             function loop() {
 53                 ctx.clearRect(0, 0, can.width, can.height);
 54                 for (var i = 0, l = aObj.length; i < l; i++) {
 55                     fnChange(aObj[i]);
 56                     checkPeng(aObj, i);
 57                 }
 58                 if (raf) {
 59                     raf = window.requestAnimationFrame(loop);
 60                 }
 61             }
 62
 63             //  改变圆心坐标
 64             function fnChange(obj) {
 65                 drawArc(obj);
 66                 obj.x += obj.sx * 10 / 4;
 67                 obj.y += obj.sy * 5 / 4;
 68
 69                 if (obj.x >= can.width - ballR) {
 70                     obj.x = can.width - ballR;
 71                     obj.sx = -1 * obj.sx;
 72                 } else if (obj.x <= ballR) {
 73                     obj.x = ballR;
 74                     obj.sx = -1 * obj.sx;
 75                 }
 76                 if (obj.y >= can.height - ballR) {
 77                     obj.y = can.height - ballR;
 78                     obj.sy = -1 * obj.sy;
 79                 } else if (obj.y <= ballR) {
 80                     obj.y = ballR;
 81                     obj.sy = -1 * obj.sy;
 82                 }
 83             }
 84             //画圆
 85             function drawArc(obj) {
 86                 ctx.save();
 87                 ctx.beginPath();
 88                 ctx.arc(obj.x % can.width, obj.y % can.height, ballR, 0, 2 * Math.PI);
 89                 ctx.closePath();
 90
 91                 var grd1 = ctx.createRadialGradient(
 92                     obj.x,
 93                     obj.y,
 94                     ballR / 2,
 95                     obj.x,
 96                     obj.y,
 97                     ballR * 13 / 10
 98                 );
 99                 // grd1.addColorStop(0, "rgba(255,255,255,1)");
100                 grd1.addColorStop(0, "rgba(255,255,255,0)");
101                 grd1.addColorStop(1, obj.scolor);
102                 ctx.fillStyle = grd1;
103                 ctx.fill();
104                 ctx.restore();
105
106                 var grd = ctx.createRadialGradient(obj.x - ballR * 3 / 10, obj.y - ballR * 4 / 10, ballR / 8, obj.x - ballR * 4 / 10, obj.y - ballR * 4 / 10, ballR * 16 / 10);
107                 grd.addColorStop(0, "rgba(255,255,255,1)");
108                 grd.addColorStop(0.2, "rgba(255,255,255,0)");
109                 grd.addColorStop(1, "rgba(255,255,255,0)");
110                 // grd.addColorStop(1, obj.scolor);
111                 ctx.fillStyle = grd;
112                 ctx.save();
113                 ctx.shadowColor = ‘rgba(0,0,0,.0)‘;
114                 ctx.fill();
115                 ctx.restore();
116             }
117
118             function randomBall(num) {
119                 var barr = [];
120                 var ball;
121                 for (var i = 0; i < num || 0; i++) {
122                     ball = {};
123                     ball.x = Math.random() * (can.width - ballR * 2) + ballR;
124                     ball.y = Math.random() * (can.height - ballR * 2) + ballR;
125                     ball.sx = Math.random() * 6 - 6 / 2;
126                     ball.sy = Math.random() * 6 - 6 / 2;
127                     var scr = Math.round(Math.random() * 200 + 50);
128                     var scg;
129                     var scb;
130                     if (scr > 200) {
131                         if (Math.random() > 1) {
132                             scg = Math.round(Math.random() * 150 + 50);
133                             scb = Math.round(Math.random() * 200 + 50);
134                         } else {
135                             scb = Math.round(Math.random() * 150 + 50);
136                             scg = Math.round(Math.random() * 200 + 50);
137                         }
138                     } else {
139                         scg = Math.round(Math.random() * 200 + 50);
140                         scb = Math.round(Math.random() * 200 + 50);
141                     }
142                     ball.scolor = ‘rgba(‘ + [scr, scg, scb, 1].join(‘,‘) + ‘)‘;
143                     barr.push(ball);
144                 }
145                 return barr;
146             }
147
148             //碰撞检测
149             function checkPeng(arr, i) {
150                 var j, len;
151
152                 for (j = 0, len = arr.length; j < len; j++) {
153                     if (i === j) {
154                         continue;
155                     }
156                     var ca = {
157                         x: arr[i].x - arr[j].x,
158                         y: arr[i].y - arr[j].y
159                     }
160                     var z = Math.sqrt(Math.pow(ca.x, 2) + Math.pow(ca.y, 2));
161                     var cha = z - ballR * 2;
162                     if (cha <= 0) {
163                         if (arr[i].x < arr[j].x) {
164                             arr[i].x += cha;
165                         } else {
166                             arr[i].x += -cha;
167                         }
168                         if (arr[i].y < arr[j].y) {
169                             arr[i].y += cha;
170                         } else {
171                             arr[i].y += -cha;
172                         }
173                         //arr[i].sy = -1*arr[i].sy;
174                         var iTY = arr[i].sy;
175                         arr[i].sy = 1 * arr[j].sy;
176                         arr[j].sy = iTY;
177                         //arr[i].sx = -1*arr[i].sx;
178                         var iTX = arr[i].sx;
179                         arr[i].sx = 1 * arr[j].sx;
180                         arr[j].sx = iTX;
181                     }
182                 }
183             }
184         }
185     </script>
186 </body>
187
188 </html>

就这样吧，canvas写了一些有意思的demo，但是没有系统的可以写成博客的东西，之后会慢慢整理一下介绍给大家~

最后，祝大家鸡年大吉吧，升职涨薪。

时间： 2024-03-14 16:27:17

【鸡年大吉】，不知道写点啥，放个demo（小球碰撞）吧，有兴趣的看看的相关文章

使用 Flask 框架写用户登录功能的Demo时碰到的各种坑（一）——创建应用

Flask 中文文档 Flask_Login 文档 Flask-sqlalchemy 文档 Jinja2 模板文档为了熟悉 Python 的 Web 开发,找到这个框架.在这里记录下使用它来写一个简单的登录 Demo 功能过程中碰到的问题. 上面几个链接就是使用到相关的库的文档. Flask_Login 这个是官方实现的一套登录验证的库. Flask_sqlalchemy 是官方对 sqlalchemy 库的一个封装,它是一个ORM,用于做数据库访问. 这里使用的开发工具是 PyCharm,使

使用 Flask 框架写用户登录功能的Demo时碰到的各种坑（四）——对 run.py 的调整

使用 Flask 框架写用户登录功能的Demo时碰到的各种坑(一)——创建应用使用 Flask 框架写用户登录功能的Demo时碰到的各种坑(二)——使用蓝图功能进行模块化使用 Flask 框架写用户登录功能的Demo时碰到的各种坑(三)——使用Flask-Login库实现登录功能为了方便以后的应用切换,所以需要对 run.py 里的代码进行调整下. 1.在/demo 目录下创建 app_start.py /demo/app_start.py # config=utf-8 from demo

使用 Flask 框架写用户登录功能的Demo时碰到的各种坑（三）——使用Flask-Login库实现登录功能

使用 Flask 框架写用户登录功能的Demo时碰到的各种坑(一)——创建应用使用 Flask 框架写用户登录功能的Demo时碰到的各种坑(二)——使用蓝图功能进行模块化本次示例的源码下载:点击下载 Flask-Login 库的中文文档:点击进入 Flask-Login 库的新版英文文档:点击进入一.导入并初始化 Flask-Login 库在项目根目录下的/demo/__init__.py 文件的头部,import 进 flask_login 库 from flask_login imp

学习 vue.js，Node.JS 等技术不知道写什么东西？请推荐点稍微复杂点的入门项目。

https://www.zhihu.com/question/38269617 11-28 更新: 最近把项目放到了vps上,虽然之后就没更新过..但是还是无耻得放一下吧,哈哈. http://goh5.luoye.pw =========更新分割线======== 新鲜出炉,先放地址:GitHub - luoye-fe/goh5: visual h5 edit个人开源H5 CMS,类似易企秀.初页,虽然没人家那么牛..\(￣▽￣)/ 数据库:MongoDB后台:NodeJS前台:Vue.Vue

mvc参数初始化默认值写了要放后

当有参数初始化值得时候参数要放后.如下remark为初始化值会报错. public ActionResult Add(int ckid, int proid, int pronum, int hjnum=0, string remark) { } 需要将string remark修改为string remark="".

标题我也不知道写啥

1 li = ["手机","电脑","鼠标垫","游艇"] 2 for i,j in enumerate(li): 3 print(i+1,j) 4 num= input("num:") 5 num = int(num) 6 len_li = len(li) 7 if num >0 and num < len_li: 8 9 good = li[num-1] 10 print(good) 11

新人报到~~~不知道写什么。先分享一个登录页面。

<!DOCTYPE><HTML> <HEAD> <TITLE></TITLE> <meta charset="utf-8"><!-- <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <MET

自己写的音乐播放器Demo开源给需要学习的人，大家编程路上一直进步，

本项目使用到的技术 1:网络请求以及图片加载用的是volley框架 2:播放音乐使用MediaPlayer类 3:数据来源使用JSON解析 4:登录收藏功能使用的SQLite实现 5:Android 6.0动态权限申请下面是运行时图片图就这么多,音乐的api接口调用的是易源数据的QQ音乐接口, 关于播放进度时间的,我记得我写了,但是没找到,这里把思路说一下,具体思路是MediaPlayer播放音乐可以得到播放音乐的总大小,已经播放的位置,使用一个定时器,实时获取MediaPlayer的播放位

刚刚写了一个自定义 dialog demo 也是网上查询了一下保留记录

1.先把dialog格式设置好透明的没有边框这样相当于得到一个空白的画板想怎么添加布局就怎么添加布局想怎么写就怎么写所以就是自定义的了转载请标注转载http://blog.csdn.net/oqihaogongyuan/article/details/50958659 自定义Dialog的详细步骤(实现自定义样式一般原理) 现在很多App的提示对话框都非常有个性,然而你还用系统的对话框样式,是不是觉得很落后呢,今天我就给大家讲讲怎样自定义自己的Dialog,学