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

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

小球是采用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. 实战小项目BUG纪录

    果然,作为程序员最可爱的女朋友就是各种BUG,解决了你的开发能力和开发效率就会上升到一个新的层次.反之,在你面对BUG的时候,如果轻易的就放弃了,你也就失去了一次自我成长的机会.学习就是这样的,我们有 ...

  2. Hbase多列范围查找（效率）

    Hbase索引表的结构 Hbase Rowkey 设计 Hbase Filter Hbase二级索引 Hbase索引表的结构 在HBase中,表格的Rowkey按照字典排序,Region按照RowKe ...

  3. CDN中前端层的复制

    前端层的复制是为了提高静态内容分发的性能和可扩展性.将静态内容的分发转由边缘服务器来完成是为了解决可扩展性的问题,因为这样做可以避免出现在对等点和广域网链路处的网络拥堵风险,而这两个地方的拥堵是网络延 ...

  4. Python开发入门14天集训营-第一章

    python第一章 python变量 变量的作用 存数据 被程序调用和操作 标记数据 声明变量 name = "Ydh" 变量名 = 变量值 变量定义规范: 变量名只能是 字母.数 ...

  5. R语言︱基本函数、统计量、常用操作函数

    先言:R语言常用界面操作 帮助:help(nnet) = ?nnet =??nnet 清除命令框中所有显示内容:Ctrl+L 清除R空间中内存变量:rm(list=ls()).gc() 获取或者设置当 ...

  6. HashMap和Hashtable的异同点

    HashMap和Hashtable的异同点 不同点: 1.HashMap的父类是AbstractMap,而Hashtable的父类是Dictiionary: 2.HashMap的key和value可以 ...

  7. const char *p;和char * const p的区别

    const char *p;       const修饰*p,所以*p是一个常量,不可修改. char* const p; const修饰p,所以指针p是一个常量,不可修改. #include< ...

  8. 利用Windows性能计数器(PerformanceCounter)监控

    一.概述 性能监视,是Windows NT提供的一种系统功能.Windows NT一直以来总是集成了性能监视工具,它提供有关操作系统当前运行状况的信息,针对各种对象提供了数百个性能计数器.性能对象,就 ...

  9. unix时间戳转换成标准时间(c#)

    //---unix时间戳转换成标准时间(c#)---//     /*     string timeStamp = "1144821796";     DateTime dtSt ...

  10. JavaScript的几种常见的创建方式

    1.通过Object构造函数或者对象字面量创建单个对象 使用字面量方法创建对象:var stut = {name: "张三"}; 使用内置构造函数创建对象:var stu = ne ...