<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>canvas 动态小球重叠效果</title>
<script>
window.onload=function()
{
var canvas=document.getElementById('canvas');
var w=canvas.width;
var h=canvas.height;
var num=30;  // 小球个数
var balls=[]; // 小球存放数组
var cxt=canvas.getContext('2d');
var t=null; function getBalls() // 创建小球
{
for(var i=0;i<num;i++)
{
// 小球随机颜色
var tempR=Math.floor(Math.random()*255);
var tempG=Math.floor(Math.random()*255);
var tempB=Math.floor(Math.random()*255);
var tempColor='rgb('+tempR+','+tempG+','+tempB+')'; //小球随机大小位置
var tempR=Math.floor(Math.random()*30+20);
var tempX=Math.floor(Math.random()*(w-tempR)+tempR);
var tempY=Math.floor(Math.random()*(h-tempR)+tempR); var tempBall={
x:tempX,
y:tempY,
r:tempR,
color:tempColor,
stepX:Math.floor(Math.random()*20-10),
stepY:Math.floor(Math.random()*20-10), // 步长 差值
};
balls.push(tempBall);
}//-----------------------------------------创建小球
} function updateBalls() // 更新小球
{
for(var i=0;i<balls.length;i++)
{
balls[i].x+=balls[i].stepX;
balls[i].y+=balls[i].stepY;
bumpTest(balls[i]); // 更新后的小球数组 x y 位置
}
} function bumpTest(ele) // 碰撞检测
{
//zuo -->向右走
if(ele.x<=ele.r)
{
ele.x=ele.r;
ele.stepX=-ele.stepX; // 反方向运动
}
// you
if(ele.x >= w-ele.r)
{
ele.x=w-ele.r;
ele.stepX=-ele.stepX;
}
//shang
if(ele.y<=ele.r)
{
ele.y=ele.r;
ele.stepY=-ele.stepY;
}
// xia
if(ele.y>=h-ele.r)
{
ele.y=h-ele.r
ele.stepY=-ele.stepY;
}
} function renderBalls()//重置画布
{
cxt.clearRect(0,0,w,h); // 清空画布
for(var i=0;i<balls.length;i++)
{
cxt.beginPath();// 开始路径
cxt.arc(balls[i].x,balls[i].y,balls[i].r,0,2*Math.PI);
cxt.fillStyle=balls[i].color;
cxt.globalCompositeOperation='xor';
cxt.closePath();// 闭合路径
cxt.fill(); //填充颜色
}
} getBalls();
clearInterval(t);
t=setInterval(function(){
updateBalls();// 更新小球
renderBalls();// 重新绘制小球
},50); } </script>
</head> <body>
<button onClick="window.history.go()"> 点击变换 </button>
<canvas width="500" height="300" style="border:1px solid #000" id="canvas"></canvas>
</body>
</html>

Canvas 动态小球重叠效果的更多相关文章

  1. canvas动态小球重叠效果

    前面的话 在javascript运动系列中,详细介绍了各种运动,其中就包括碰壁运动.但是,如果用canvas去实现,却是另一种思路.本文将详细介绍canvas动态小球重叠效果 效果展示 静态小球 首先 ...

  2. HTML5 Canvas彩色小球碰撞运动特效

    脚本简介 HTML5 Canvas彩色小球碰撞运动特效是一款基于canvas加面向对象制作的运动小球动画特效.   效果展示 http://hovertree.com/texiao/html5/39/ ...

  3. canvas三角函数模拟水波效果

    .katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...

  4. 酷!使用 jQuery & Canvas 制作相机快门效果

    在今天的教程中,我们将使用 HTML5 的 Canvas 元素来创建一个简单的摄影作品集,它显示了一组精选照片与相机快门的效果.此功能会以一个简单的 jQuery 插件形式使用,你可以很容易地整合到任 ...

  5. 如何使用 HTML5 Canvas 制作水波纹效果

    今天,我们继续分享 JavaScript 实现的效果例子,这篇文章会介绍使用 JavaScript 实现水波纹效果.水波效果以图片为背景,点击图片任意位置都会触发.有时候,我们使用普通的 Javasc ...

  6. Android 动态Tab分页效果实现

    当前项目使用的是TabHost+Activity进行分页,目前要做个报表功能,需要在一个Tab页内进行Activity的切换.比方说我有4个Tab页分别为Tab1,Tab2,Tab3,Tab4,现在的 ...

  7. 【转】提示框第三方库之MBProgressHUD iOS toast效果 动态提示框效果

    原文网址:http://www.zhimengzhe.com/IOSkaifa/37910.html MBProgressHUD是一个开源项目,实现了很多种样式的提示框,使用上简单.方便,并且可以对显 ...

  8. 深入学习CSS外边距margin(重叠效果,margin传递效果,margin:auto实现块级元素水平垂直居中效果)

    前言 margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有非常奇怪 ...

  9. 基于HTML5 Canvas可撕裂布料效果

    分享一款布料效果的 HTML5 Canvas 应用演示,效果逼真.你会看到,借助 Canvas 的强大绘图和动画功能,只需很少的代码就能实现让您屏息凝神的效果. 在线预览   源码下载 实现的代码. ...

随机推荐

  1. Linux deepin 下sublimes配置g++ openGL

    参考 :http://blog.csdn.net/u010129448/article/details/47754623 ubuntu 下gnome只要将代码中deepin-terminal改为gno ...

  2. 【Matplotlib】 标注一些点

    相关的文档: Annotating axis annotate() command 标注的代码如下: ... t = 2 * np.pi / 3 plt.plot([t, t], [0, np.cos ...

  3. Xcode中常用的快捷键

    各种新建 shift + comand + n 新建xcode项目   option + command + n 新建分组  command + n 新建文件 搜索 shift + command + ...

  4. firefox如何restart重启

    1.开发者工具栏可以对firefox进行重启,不是关闭firefox又打开那种重启

  5. 写一个函数int get(),这个函数运行一次可以从V[N]里随机取出一个数,而这个数必须是符合1/N平均分布的

    题目:有一个函数int getNum(),每运行一次可以从一个数组V[N]里面取出一个数,N未知,当数取完的时候,函数返回NULL.现在要求写一个函数int get(),这个函数运行一次可以从V[N] ...

  6. (知识点)JavaScript原型和原型链

    〇 每个函数都拥有prototype属性,而该属性所储存的就是原型对象 1)原型属性—— 上面我们测试了foo()函数的 1) length属性(length属性除了可以用在数组中,还可以用于记录函数 ...

  7. kafka扫盲笔记,实战入门

    Kafka作为大数据时代的产物,自有其生存之道.让我们跟随扫盲班的培训,进行大致了解与使用kafka吧.(平时工作有使用不代表就知道kafka了哟) 1. kafka介绍 1.1. 拥有的能力(能干什 ...

  8. JavaScript之12306自动刷新车票[待完善]

    function refresh(){ var search_btn = document.getElementById("query_ticket"); var result_t ...

  9. java多线程有哪些实际的应用场景?

    多线程使用的主要目的在于: 1.吞吐量:你做WEB,容器帮你做了多线程,但是他只能帮你做请求层面的.简单的说,可能就是一个请求一个线程.或多个请求一个线程.如果是单线程,那同时只能处理一个用户的请求. ...

  10. CSDN日报20170226——《你离心想事成仅仅差一个计划》

    [程序人生] 你离心想事成仅仅差一个计划 作者:安晓辉 从目标怎样导出工作计划.我们会以"出版一本小说"为例来解说计划的形成过程. 在開始之前.我们先来说明一个概念:目标的两种类型 ...