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

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

小球是采用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. 使用eclipse写C

    C终究还是程序员进阶少不了坎,熟悉nginx ,深入学习php等最后都逃不过C,那为何不去拥抱呢...'='',c对我来说也是老朋友了,但是那时做 硬件作比赛而且比较浅显,现在决定还是 重新试试吧,, ...

  2. Java常见加密算法

    常见 package com.example.decript; import java.io.UnsupportedEncodingException; import java.security.In ...

  3. Hama顶点编程

    Hama是基于HDFS上的BSP模型实现. Apache Hame是Google Pregel的开源实现 Pregel是Google提出的一个面向大规模图计算的通用编程模型.许多实际应用中都涉及到大型 ...

  4. android WebP解析开源库-支持高清无损

    在我们的项目中需要支持WebP高清无损图片,推荐一个我们已经使用的解析开源库给大家:https://github.com/keshuangjie/WebpExample/tree/master/lib ...

  5. CSS3之background-origin

    1.属性简介 background-origin:border|content|padding|!important border:从border区域开始显示背景: content:从content区 ...

  6. mpeg文件格式分析

    MPEG-1流比特层次结构分析总结 1．简要介绍Mpeg 2．Mpeg-1数据流分析 2.1视频序列层(VideoStream) 2.2画面组层(GOP) 2.3画面层(Pictures) 2.4片层 ...

  7. HQL查询步骤

    HQL查询步骤 1.获取Hibernate Session对象 2.编写HQL语句 3.以HQL语句作为参数,调用Session的createQuery方法创建查询对象 4.HQL语句包含参数,则调用 ...

  8. [INS-32052] Oracle基目录和Oracle主目录位置相同

    1.错误描述 [INS-32052] Oracle基目录和Oracle主目录位置相同 2.错误原因    Oracle基目录和Oracle主目录位置相同 3.解决办法    Oracle基目录和Ora ...

  9. ORA-00904："T1"."AREA_ID" :标识符无效

    1.错误描述 ORA-00904:"T1"."AREA_ID" :标识符无效 00904 . 00000 - "%s:invalid identifi ...

  10. Jquery+Json+Handler文件结合应用实例

    1.页面script代码-[model数据.字符串] <script type="text/javascript" charset="utf-8" src ...