【鸡年大吉】，不知道写点啥，放个demo（小球碰撞）吧，有兴趣的看看
最初的想法是仿写win7的泡泡屏保效果，但是对于小球的斜碰问题一直没搞明白（如果你会这个，欢迎留言或者做个demo），所以只是简单处理了碰撞后的速度，有时候会看起来很搞笑~~~funny guy
话不多说，先上demo
https://win7killer.github.io/demo_set/html_demo/canvas/can_ps/ball.html
效果如下：
code:
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
} html {
height: 100%;
} body {
width: 100%;
height: 100%;
background: #333;
background: url(./img/6.jpg) no-repeat 0 0;
background-size: cover;
} canvas {
display: block;
}
</style>
</head> <body>
<canvas id="can" width=0 height=0></canvas>
<script>
var ballsNum = 20;
window.onload = function() { var can = document.getElementById('can');
can.width = document.body.offsetWidth;
can.height = document.body.offsetHeight;
var ctx = can.getContext('2d');
var ballR = Math.floor(can.height / 15);
ctx.shadowColor = 'rgba(0,0,0,.3)';
ctx.shadowOffsetX = ballR / 5;
ctx.shadowOffsetY = ballR / 5;
// ctx.shadowBlur = ballR / 10 > 5 ? ballR / 10 : 5;
ctx.shadowBlur = 16; var aObj = randomBall(ballsNum);
var raf = window.requestAnimationFrame(loop); function loop() {
ctx.clearRect(0, 0, can.width, can.height);
for (var i = 0, l = aObj.length; i < l; i++) {
fnChange(aObj[i]);
checkPeng(aObj, i);
}
if (raf) {
raf = window.requestAnimationFrame(loop);
}
} // 改变圆心坐标
function fnChange(obj) {
drawArc(obj);
obj.x += obj.sx * 10 / 4;
obj.y += obj.sy * 5 / 4; if (obj.x >= can.width - ballR) {
obj.x = can.width - ballR;
obj.sx = -1 * obj.sx;
} else if (obj.x <= ballR) {
obj.x = ballR;
obj.sx = -1 * obj.sx;
}
if (obj.y >= can.height - ballR) {
obj.y = can.height - ballR;
obj.sy = -1 * obj.sy;
} else if (obj.y <= ballR) {
obj.y = ballR;
obj.sy = -1 * obj.sy;
}
}
//画圆
function drawArc(obj) {
ctx.save();
ctx.beginPath();
ctx.arc(obj.x % can.width, obj.y % can.height, ballR, 0, 2 * Math.PI);
ctx.closePath(); 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);
grd.addColorStop(0, "rgba(255,255,255,1)");
grd.addColorStop(1, obj.scolor);
ctx.fillStyle = grd;
ctx.fill();
ctx.restore();
} function randomBall(num) {
var barr = [];
var ball;
for (var i = 0; i < num || 0; i++) {
ball = {};
ball.x = Math.random() * (can.width - ballR * 2) + ballR;
ball.y = Math.random() * (can.height - ballR * 2) + ballR;
ball.sx = Math.random() * 6 - 6 / 2;
ball.sy = Math.random() * 6 - 6 / 2;
var scr = Math.round(Math.random() * 200 + 50);
var scg;
var scb;
if (scr > 200) {
if (Math.random() > 1) {
scg = Math.round(Math.random() * 150 + 50);
scb = Math.round(Math.random() * 200 + 50);
} else {
scb = Math.round(Math.random() * 150 + 50);
scg = Math.round(Math.random() * 200 + 50);
}
} else {
scg = Math.round(Math.random() * 200 + 50);
scb = Math.round(Math.random() * 200 + 50);
}
ball.scolor = 'rgba(' + [scr, scg, scb, 1].join(',') + ')';
barr.push(ball);
}
return barr;
} //碰撞检测
function checkPeng(arr, i) {
var j, len; for (j = 0, len = arr.length; j < len; j++) {
if (i === j) {
continue;
}
var ca = {
x: arr[i].x - arr[j].x,
y: arr[i].y - arr[j].y
}
var z = Math.sqrt(Math.pow(ca.x, 2) + Math.pow(ca.y, 2));
var cha = z - ballR * 2;
if (cha <= 0) {
if (arr[i].x < arr[j].x) {
arr[i].x += cha;
} else {
arr[i].x += -cha;
}
if (arr[i].y < arr[j].y) {
arr[i].y += cha;
} else {
arr[i].y += -cha;
}
//arr[i].sy = -1*arr[i].sy;
var iTY = arr[i].sy;
arr[i].sy = 1 * arr[j].sy;
arr[j].sy = iTY;
//arr[i].sx = -1*arr[i].sx;
var iTX = arr[i].sx;
arr[i].sx = 1 * arr[j].sx;
arr[j].sx = iTX;
}
}
}
}
</script>
</body> </html>
然后是加强版的透明泡泡
https://win7killer.github.io/demo_set/html_demo/canvas/can_ps/ball_1.html
效果如下：
code：
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
} html {
height: 100%;
} body {
width: 100%;
height: 100%;
background: #333;
background: url(./img/6.jpg) no-repeat 0 0;
background-size: cover;
} canvas {
display: block;
}
</style>
</head> <body>
<canvas id="can" width=0 height=0></canvas>
<script>
var ballsNum = 20;
window.onload = function() { var can = document.getElementById('can');
can.width = document.body.offsetWidth;
can.height = document.body.offsetHeight;
var ctx = can.getContext('2d');
var ballR = Math.floor(can.height / 15);
ctx.shadowColor = 'rgba(0,0,0,.3)';
ctx.shadowOffsetX = ballR / 5;
ctx.shadowOffsetY = ballR / 5;
// ctx.shadowBlur = ballR / 10 > 5 ? ballR / 10 : 5;
ctx.shadowBlur = 16; var aObj = randomBall(ballsNum);
var raf = window.requestAnimationFrame(loop);
function loop() {
ctx.clearRect(0, 0, can.width, can.height);
for (var i = 0, l = aObj.length; i < l; i++) {
fnChange(aObj[i]);
checkPeng(aObj, i);
}
if (raf) {
raf = window.requestAnimationFrame(loop);
}
} // 改变圆心坐标
function fnChange(obj) {
drawArc(obj);
obj.x += obj.sx * 10 / 4;
obj.y += obj.sy * 5 / 4; if (obj.x >= can.width - ballR) {
obj.x = can.width - ballR;
obj.sx = -1 * obj.sx;
} else if (obj.x <= ballR) {
obj.x = ballR;
obj.sx = -1 * obj.sx;
}
if (obj.y >= can.height - ballR) {
obj.y = can.height - ballR;
obj.sy = -1 * obj.sy;
} else if (obj.y <= ballR) {
obj.y = ballR;
obj.sy = -1 * obj.sy;
}
}
//画圆
function drawArc(obj) {
ctx.save();
ctx.beginPath();
ctx.arc(obj.x % can.width, obj.y % can.height, ballR, 0, 2 * Math.PI);
ctx.closePath(); var grd1 = ctx.createRadialGradient(
obj.x,
obj.y,
ballR / 2,
obj.x,
obj.y,
ballR * 13 / 10
);
// grd1.addColorStop(0, "rgba(255,255,255,1)");
grd1.addColorStop(0, "rgba(255,255,255,0)");
grd1.addColorStop(1, obj.scolor);
ctx.fillStyle = grd1;
ctx.fill();
ctx.restore(); 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);
grd.addColorStop(0, "rgba(255,255,255,1)");
grd.addColorStop(0.2, "rgba(255,255,255,0)");
grd.addColorStop(1, "rgba(255,255,255,0)");
// grd.addColorStop(1, obj.scolor);
ctx.fillStyle = grd;
ctx.save();
ctx.shadowColor = 'rgba(0,0,0,.0)';
ctx.fill();
ctx.restore();
} function randomBall(num) {
var barr = [];
var ball;
for (var i = 0; i < num || 0; i++) {
ball = {};
ball.x = Math.random() * (can.width - ballR * 2) + ballR;
ball.y = Math.random() * (can.height - ballR * 2) + ballR;
ball.sx = Math.random() * 6 - 6 / 2;
ball.sy = Math.random() * 6 - 6 / 2;
var scr = Math.round(Math.random() * 200 + 50);
var scg;
var scb;
if (scr > 200) {
if (Math.random() > 1) {
scg = Math.round(Math.random() * 150 + 50);
scb = Math.round(Math.random() * 200 + 50);
} else {
scb = Math.round(Math.random() * 150 + 50);
scg = Math.round(Math.random() * 200 + 50);
}
} else {
scg = Math.round(Math.random() * 200 + 50);
scb = Math.round(Math.random() * 200 + 50);
}
ball.scolor = 'rgba(' + [scr, scg, scb, 1].join(',') + ')';
barr.push(ball);
}
return barr;
} //碰撞检测
function checkPeng(arr, i) {
var j, len; for (j = 0, len = arr.length; j < len; j++) {
if (i === j) {
continue;
}
var ca = {
x: arr[i].x - arr[j].x,
y: arr[i].y - arr[j].y
}
var z = Math.sqrt(Math.pow(ca.x, 2) + Math.pow(ca.y, 2));
var cha = z - ballR * 2;
if (cha <= 0) {
if (arr[i].x < arr[j].x) {
arr[i].x += cha;
} else {
arr[i].x += -cha;
}
if (arr[i].y < arr[j].y) {
arr[i].y += cha;
} else {
arr[i].y += -cha;
}
//arr[i].sy = -1*arr[i].sy;
var iTY = arr[i].sy;
arr[i].sy = 1 * arr[j].sy;
arr[j].sy = iTY;
//arr[i].sx = -1*arr[i].sx;
var iTX = arr[i].sx;
arr[i].sx = 1 * arr[j].sx;
arr[j].sx = iTX;
}
}
}
}
</script>
</body> </html>
就这样吧，canvas写了一些有意思的demo，但是没有系统的可以写成博客的东西，之后会慢慢整理一下介绍给大家~
最后，祝大家鸡年大吉吧，升职涨薪。
【鸡年大吉】，不知道写点啥，放个demo（小球碰撞）吧，有兴趣的看看的更多相关文章
- 使用 Flask 框架写用户登录功能的Demo时碰到的各种坑（五）——实现注册功能
使用 Flask 框架写用户登录功能的Demo时碰到的各种坑(一)——创建应用 使用 Flask 框架写用户登录功能的Demo时碰到的各种坑(二)——使用蓝图功能进行模块化 使用 Flask 框架写用 ...
- 使用 Flask 框架写用户登录功能的Demo时碰到的各种坑（四）——对 run.py 的调整
使用 Flask 框架写用户登录功能的Demo时碰到的各种坑(一)——创建应用 使用 Flask 框架写用户登录功能的Demo时碰到的各种坑(二)——使用蓝图功能进行模块化 使用 Flask 框架写用 ...
- 使用 Flask 框架写用户登录功能的Demo时碰到的各种坑（一）——创建应用
使用 Flask 框架写用户登录功能的Demo时碰到的各种坑(一)——创建应用 使用 Flask 框架写用户登录功能的Demo时碰到的各种坑(二)——使用蓝图功能进行模块化 使用 Flask 框架写用 ...
- 使用 Flask 框架写用户登录功能的Demo时碰到的各种坑（二）——使用蓝图功能进行模块化
使用 Flask 框架写用户登录功能的Demo时碰到的各种坑(一)——创建应用 使用 Flask 框架写用户登录功能的Demo时碰到的各种坑(二)——使用蓝图功能进行模块化 使用 Flask 框架写用 ...
- 使用 Flask 框架写用户登录功能的Demo时碰到的各种坑（三）——使用Flask-Login库实现登录功能
使用 Flask 框架写用户登录功能的Demo时碰到的各种坑(一)——创建应用 使用 Flask 框架写用户登录功能的Demo时碰到的各种坑(二)——使用蓝图功能进行模块化 使用 Flask 框架写用 ...
- 记写 android 微信登录的demo历程
前言 首先看一条链接: https://github.com/Tencent/WeDemo 腾讯给了一个wedemo,微信第三方登录的例子.里面是php和ios,ios是object写的,php还是原 ...
- canvas写的一个小时钟demo
<!DOCTYPE html> <html> <head> <title>HTML5 Canvas Demo of clock</title> ...
- webpack学习（二)：先写几个webpack基础demo
一.先写一个简单demo1 1-1安装好webpack后创建这样一个目录: 1-2:向src各文件和dist/index.html文件写入内容: <!DOCTYPE html> <h ...
- js 模仿jquery 写个简单的小demo
<div id="div" style="background:red;width:100px;height:300px"> 123123123 & ...
随机推荐
- linux undelete
http://www.tldp.org/HOWTO/archived/Ext2fs-Undeletion-Dir-Struct/index.html http://www.giis.co.in/deb ...
- ibatis参数传递小技巧 - 疯狂的菠菜 - ITeye技术网站
body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...
- Quick Cocos2dx CCLuaStack has no member names 'loadChunksZip'
demo进行了这么久,已经很久没有连真机调试一下了,昨天下午我旁边的家伙连真机调试出了很多问题,于是我也连真机调一下吧. 运行一下project.android里面的 build_native.bat ...
- window.location.href 和 document.location.href
document表示的是一个文档对象,window表示的是一个窗口对象,一个窗口下可以有多个文档对象. 所以一个窗口下只有一个window.location.href,但是可能有多个document. ...
- Docker 命令（二）
Docker 入门 启动docker systemctl start docker 帮助命令 docker --help docker [Commands] --help 例:docker run ...
- POJ3723最小生成树
题意:从一个起点出发连接男孩子和女孩子,若是两者之间有连接的,则花费为10000-d,若是没有连接的则花费为10000 分析:很显然是一个最小生成树,但是我们希望的是d越大越好,因为d越大,10000 ...
- xml常用四种解析方式优缺点的分析×××××
xml常用四种解析方式优缺点的分析 博客分类: xml 最近用得到xml的解析方式,于是就翻了翻自己的笔记同时从网上查找了资料,自己在前人的基础上总结了下,贴出来大家分享下. 首先介绍一下xml语 ...
- (C#)利用Aspose.Cells组件导入导出excel文件
Aspose.Cells组件可以不依赖excel来导入导出excel文件: 导入: public static System.Data.DataTable ReadExcel(String strFi ...
- linux 更换yum源
1.进入存放源配置的文件夹 cd /etc/yum.repos.d 2.备份默认源 mv ./CentOS-Base.repo ./CentOS-Base.repo.bak 3.使用wget下载163 ...
- make的参数
转载自 陈皓<跟我一起写 Makefile> 下面列举了所有GNU make 3.80版的参数定义.其它版本和产商的make大同小异,不过其它产商的make的具体参数还是请参考各自的产品文 ...