小球碰撞效果是采用面向对象的方式写的，在小球的构造器里包含了小球的属性值，大小，移动速度，半径大小以及颜色。

在小球的原型方法里，添加了小球运动的方法，当小球碰撞到屏幕边界的时候进行反弹。

小球是采用h5的canvas绘制，采用了性能更高的requestanimationframe作为计时器，该计时器是以屏幕的刷新率作基准，CPU占用较少，性能比settimeout以及setinterval性能更高，
  <!DOCTYPE html>
  <html lang="en">
   
  <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>Ball</title>
  <style>
  html,
  body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  }
   
  canvas {
  background: #000;
  }
  </style>
  </head>
   
  <body>
  <canvas id='canv'>您的浏览器不支持CANVAS，请更换浏览器!!!</canvas>
  <script>
  document.addEventListener('resize', resize)
   
  function resize() {//监听屏幕缩放
   
  canvs.width = window.innerWidth;
   
  canvs.height = window.innerHeight;
  }
  var canvs = document.getElementById('canv');
   
  canvs.width = window.innerWidth;
   
  canvs.height = window.innerHeight;
   
  var ctx = canvs.getContext('2d');//获得canvas绘图环境
   
  var ball = function () {//小球构造器
   
  this.bx = Math.random() * canvs.width;//小球x轴的位置
   
  this.by = Math.random() * canvs.height;//小球y轴的位置
   
  this.r = Math.random() * 20 + 10;//小球的半径
   
  this.color = 'rgba('+Math.ceil (Math.random()*255)+','+Math.ceil (Math.random()*255)+','+Math.ceil (Math.random()*255)+','+Math.random()/4+')'//小球的颜色
   
  this.vx = Math.random() *10-5;//小球的x轴方向的运动速度
   
  this.vy = Math.random() *4-2;//小球y轴方向的速度
  }
  ball.prototype.draw = function () {//小球绘制方法
  // ctx.fillStyle = 'rgba(255,255,255,0.1)';
  // ctx.fillRect(0, 0, canvs.width, canvs.height);
  // ctx.clearRect(0, 0, canvs.width, canvs.height);
  ctx.beginPath();//开始路径
  var grd=ctx.createRadialGradient(this.bx,this.by,0,this.bx,this.by,this.r);//生成小球径向渐变色
  grd.addColorStop(0,"white");//里面的颜色
  grd.addColorStop(1,this.color);//外界的颜色
  ctx.globeAlpha=0.2;//透明度
  // Fill with gradient
  ctx.fillStyle=grd;//以渐变色填充小球
   
   
  ctx.arc(this.bx, this.by, this.r, 0, Math.PI * 2, true);//画圆函数
   
  ctx.fill()
   
  }
   
  ball.prototype.move = function () {//小球的移动方法
   
  this.bx += this.vx;
   
  this.by += this.vy;
   
  // ball.vy *= 0.99;
  // ball.vy += 0.25;
  if (this.by + this.vy > canvs.height || this.by + this.vy < 0) {
   
  this.vy = -this.vy;//边界判定，到边界后反向弹
  //
   
  }
  if (this.bx + this.vx > canvs.width || this.bx + this.vx < 0) {
   
  this.vx = -this.vx;
  // nball.color = '#' + ('00000' + ((Math.random() * 16777215)))
  }
   
  }
   
  function gogo(num) {
  num= num||10;
  var globe = [];
   
  for (var i = 0; i < num; i++) {
   
  var nball = new ball();
   
  globe.push(nball)
   
  // nball.draw()
   
  }
  console.log(globe)
  function ballmove(){
  // ctx.fillStyle = 'rgba(255,255,255,0.3)';
  // ctx.fillRect(0, 0, canvs.width, canvs.height);
  ctx.clearRect(0, 0, canvs.width, canvs.height);
  for (var j = globe.length - 1; j >= 0; j--) {
  // globe[j].draw()
   
  globe[j].move();
   
  globe[j].draw()
  }
  window.requestAnimationFrame(ballmove)
  }
  ballmove()
   
  }
  gogo(100)
   
  // function drawcrc() {
  // // ctx.fillStyle = 'rgba(255,255,255,0.3)';
  // // ctx.fillRect(0, 0, canvs.width, canvs.height);
  // ctx.clearRect(0, 0, canvs.width, canvs.height);
  // var nball = new ball();
  // nball.draw();
   
   
  // window.requestAnimationFrame(drawcrc)
  // }
  // drawcrc();
  </script>
  </body>
   
  </html>

canvas小球的更多相关文章

  1. h5 canvas 小球移动

    h5 canvas 小球移动 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  2. canvas小球动画原理

    随着html5发展,canvas标签作为h5革命性的发展标志也越来越流行.canvas标签的强大之处,不仅在于它可以作为一个独立的画布,也可以利用canvas做一些动画而不用导入flash文件.同时, ...

  3. 再探canvas(小球实例)

    之前学习过canvas的一些使用,也用过canvas绘制过时钟, 但是很久不用,有些遗忘了,这里做一个简单的回顾. 在web页面创建一个canvas画布非常简单,如下即可: <canvas id ...

  4. canvas小球动画

    绘制小球 我们将会画一个小球用于动画学习,所以首先在画布上画一个球.下面的代码帮助我们建立画布. <canvas id="></canvas> 跟平常一样,我们需要先 ...

  5. canvas小球 时间倒计时demo-优化

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  6. canvas小球 时间demo

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  7. canvas动画气球

    canvas小球的动画我用canvas画布实现的小球动画效果,可以参考下 我用canvas画布实现的小球动画效果,可以参考下 我用canvas画布实现的小球动画效果,可以参考下 我用canvas画布实 ...

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

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

  9. canvas标签(1)--线条、矩形、圆形、文本、阴影、抛小球

    从网上扒拉的代码,敲了敲代码玩. html页面显示内容很简单,只要写个canvas标签,给他一个id写js就可以了 <!DOCTYPE html> <html> <hea ...

随机推荐

  1. 【BZOJ1565】 植物大战僵尸

    Description Input Output 仅包含一个整数,表示可以获得的最大能源收入.注意,你也可以选择不进行任何攻击,这样能源收入为0. Sample Input 3 2 10 0 20 0 ...

  2. windowsXP下搭建JAVA环境教程

    一.工具准备安装JKD6:传送门:http://www.java.net/download/jdk6/6u10/promoted/b32/binaries/jdk-6u10-rc2-bin-b32-w ...

  3. PHP常见错误

    1.关于单引号和双引号的区别. $sql="insert into tableName values ('".$name."','".$email." ...

  4. FusionCharts多数据验证饼图label是否重叠

    昨天,有人问我一个问题:由于饼图的数据太多,label标签上的汉字过多,导致重叠,该怎么解决? 今天我用大量的数据,label标签的字符也很多,但是通过验证没有发现有重叠的情况啊! 1.验证的JSP页 ...

  5. Flex和Servlet结合上传文件报错（一）

    1.具体错误如下 一个表单域 不是一个表单域 java.io.FileNotFoundException: D:\MyEclipse\workspace\FlexFileUpload\Web\null ...

  6. freemarker报错之六

    1.错误描述 五月 28, 2014 10:32:40 下午 freemarker.log.JDK14LoggerFactory$JDK14Logger error 严重: Template proc ...

  7. Error:Error #2174

    1.错误描述 Error:Error #2174 : 对于每个FileReference,每次只能执行一个下载.上载.加载或保存操作 2.错误原因 Flex中,在做单文件上传时,多次点击"上 ...

  8. OpenStack_I版 3.glance部署

    存储镜像path                 默认镜像不存储在本地,一般放在swift对象存储或Cinder块存储里   glance安装     拷贝配置文件到/ect下,并新建配置目录,日志目 ...

  9. 关于swiper的滚动条滑动

    <div class="swiper-container2"> <div class="swiper-wrapper"> <div ...

  10. 加深try catch Finnly的理解

    上代码 public String twoGetFeeInfoByWithUnit(JSONArray jsonArray,String key1,String key2){ String Debit ...