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

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

小球是采用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. 基础--Linux环境下一键部署 lnmp

    1. 通过x-shell 或者 putty 登录服务器 2. 下载lnmp一键安装包 >wget -c http://soft.vpser.net/lnmp/lnmp1.4.tar.gz  # ...

  3. Quartz基本使用

    1.Quartz概述:简单的说就是java的一个定时任务的框架,没有那么复杂的解释,跟前端的定时器一样.在了解它之前,首先熟悉几个概念. 2.基本概念 2.1 Job:表示一个工作,要执行的具体内容. ...

  4. Hibernate5环境搭建

      1.导包 Hibernate开发包   数据库的驱动包   2.核心配置文件   核心配置文件(赋值到src下) 1.核心配置文件 对于hibernate的核心配置文件它有两种方式(选其中一种即可 ...

  5. SMJobBless官方Demo笔记

    SMJobBless是苹果官方提供的用于"MacOS app获取root权限"的demo. 具体思路 使用Security.framework和ServiceManagement. ...

  6. ORA-04028: cannot generate diana for object xxx

    在ORACLE数据库(10.2.0.5.0)上修改一个包的时候,编译有错误,具体错误信息为"ORA-04028: cannot generate diana for object xxx&q ...

  7. API接口签名校验

    在开发app中,我们经常要为app提供接口.但是为了保证数据的安全,我们通常会对接口的参数进行加密. 1.不验证的接口api api接口请求,"http://www.xx.com/getUs ...

  8. Java循环和条件

    下列程序的输出结果是什么? 1.Java循环和条件 /** * @Title:IuputData.java * @Package:com.you.data * @Description:TODO * ...

  9. google浏览器插件推荐

    http://www.tuicool.com/articles/eQ32Ur http://blog.jobbole.com/1386/ https://www.oschina.net/news/46 ...

  10. Java语法 示例

    第二章: int:整型 double:双精度浮点型 char:字符型 String:字符串型语法:数据类型 变量名: 如:String name: 变量名=值: 如:name="张三&quo ...