js面向对象实现canvas制作彩虹球喷枪效果


Posted in Javascript onSeptember 24, 2016

前段时间在研究canvas,感觉还挺好玩的,就写了一个小demo,效果如下:

js面向对象实现canvas制作彩虹球喷枪效果

第一次尝试用js面向对象的方式来写,经验不足,还请大家多多包涵。 

下面开始简单介绍代码: 

canvas画布:

<canvas id='canvas' width='1050' height='500' style='background:#333;overflow: hidden;'></canvas>

彩虹球的随机颜色是通过下面两个方法来实现的,在《js常用方法和一些封装(2) -- 随机数生成》中曾经提到过。

/**
 * 获取 0 ~ num的随机数(闭区间)
 */
function randomNum(num){
 return Math.floor(Math.random()*(num+1));
};

/**
 * 获取随机颜色(支持任意浏览器)
 */
function randomColor16(){
 //0-255 
 var r = randomNum(255).toString(16);
 var g = randomNum(255).toString(16);
 var b = randomNum(255).toString(16);
 //255的数字转换成十六进制
 if(r.length<2)r = "0"+r;
 if(g.length<2)g = "0"+g;
 if(b.length<2)b = "0"+b;
 return "#"+r+g+b;
};

       

每当我鼠标点下,其实是在一个矩形区域随机产生不同颜色的彩虹球,彩虹球出现的位置也是随机的,通过范围随机数来实现:

/*
 * 获取范围随机数 (闭区间)
 */
function randomRange(start,end){
 return Math.floor(Math.random()*(end-start+1))+start;
};

接下来是彩虹球的类,用面向对象来做。

//彩虹球的类
var ColorBall = function(){}

ColorBall.prototype.left = 0; //X轴
ColorBall.prototype.top = 0; //y轴
ColorBall.prototype.r = 10; //半径

在本案例中,鼠标相当于是彩虹球喷枪,我们也用面向对象的思想来设计它:

//RainbowBrush 彩虹球喷枪
RainbowBrush = function(){}

//生产小球数组的方法
RainbowBrush.prototype.getBalls = function(num){
 var colorBalls = [];
 for(var i = 0; i < num; i++){
  var ball = new ColorBall();
  colorBalls.push(ball);
 }
 return colorBalls;
}

//喷刷彩虹球
RainbowBrush.prototype.brush = function(context,balls,x,y){
 balls.forEach(function(ballIem){
  ballIem.x = randomRange(x - 6,x + 6);
  ballIem.y = randomRange(y - 6,y + 6);
  ballIem.r = 5;
  
  context.beginPath();
  context.fillStyle=randomColor16();
  context.arc(ballIem.x,ballIem.y,ballIem.r,0,Math.PI*2);
  context.fill();
 })
 
}

它有两个方法,一个是生产彩虹球,另一个是喷刷彩虹球。 

案例的主要逻辑如下:

var rainbowBrush = new RainbowBrush(); //初始化彩虹球喷枪
var balls = rainbowBrush.getBalls(1);

//当鼠标按下
canvasDom.onmousedown = function(){
 var flag = true;
 canvasDom.onmousemove = function(e){
  var x = e.clientX;
  var y = e.clientY;
  if(flag) rainbowBrush.brush(context,balls,x,y);
 }
 
 canvasDom.onmouseup = function(){
  flag = false;
 }
}

案例全部代码:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>彩虹球喷枪</title>
 </head>
 <body>
  <canvas id='canvas' width='1050' height='500' style='background:#333;overflow: hidden;'></canvas>
  
 </body>
 
 <script type="text/javascript">
 
  /**
   * 获取 0 ~ num的随机数(闭区间)
   */
  function randomNum(num){
   return Math.floor(Math.random()*(num+1));
  };

  /*
   * 获取范围随机数 (闭区间)
   */
  function randomRange(start,end){
   return Math.floor(Math.random()*(end-start+1))+start;
  };
  
  
  /**
   * 获取随机颜色(支持任意浏览器)
   */
  function randomColor16(){
   //0-255 
   var r = randomNum(255).toString(16);
   var g = randomNum(255).toString(16);
   var b = randomNum(255).toString(16);
   //255的数字转换成十六进制
   if(r.length<2)r = "0"+r;
   if(g.length<2)g = "0"+g;
   if(b.length<2)b = "0"+b;
   return "#"+r+g+b;
  };
  
  var canvasDom = document.getElementById('canvas');
  var context = canvasDom.getContext('2d');
  var maxWidth = 1050;
  var maxHeight = 500;
  

  //彩虹球的类
  var ColorBall = function(){}
  
  ColorBall.prototype.left = 0; //X轴
  ColorBall.prototype.top = 0; //y轴
  ColorBall.prototype.r = 10; //半径
  
  //RainbowBrush 彩虹球喷枪
  RainbowBrush = function(){}
  
  //生产小球数组的方法
  RainbowBrush.prototype.getBalls = function(num){
   var colorBalls = [];
   for(var i = 0; i < num; i++){
    var ball = new ColorBall();
    colorBalls.push(ball);
   }
   return colorBalls;
  }
  
  //喷刷彩虹球
  RainbowBrush.prototype.brush = function(context,balls,x,y){
   balls.forEach(function(ballIem){
    ballIem.x = randomRange(x - 6,x + 6);
    ballIem.y = randomRange(y - 6,y + 6);
    ballIem.r = 5;
    
    context.beginPath();
    context.fillStyle=randomColor16();
    context.arc(ballIem.x,ballIem.y,ballIem.r,0,Math.PI*2);
    context.fill();
   })
   
  }
  
  var rainbowBrush = new RainbowBrush(); //初始化彩虹球喷枪
  var balls = rainbowBrush.getBalls(1);

  //当鼠标按下
  canvasDom.onmousedown = function(){
   var flag = true;
   canvasDom.onmousemove = function(e){
    var x = e.clientX;
    var y = e.clientY;
    if(flag) rainbowBrush.brush(context,balls,x,y);
   }
   
   canvasDom.onmouseup = function(){
    flag = false;
   }
  }

 </script>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
extjs render 用法介绍
Sep 11 Javascript
struts2+jquery组合验证注册用户是否存在
Apr 30 Javascript
Windows系统下Node.js的简单入门教程
Jun 23 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
Aug 12 Javascript
JS处理json日期格式化问题
Oct 01 Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
Feb 21 Javascript
vue iview组件表格 render函数的使用方法详解
Mar 15 Javascript
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
Aug 24 Javascript
JavaScript 几种循环方式以及模块化的总结
Sep 03 Javascript
OpenLayers3实现地图显示功能
Sep 25 Javascript
通过实例了解Render Props回调地狱解决方案
Nov 04 Javascript
轻松实现js选项卡切换效果
Sep 24 #Javascript
在localStorage中存储对象数组并读取的方法
Sep 24 #Javascript
基于JavaScript实现跳转提示页面
Sep 24 #Javascript
JavaScript实现DOM对象选择器
Sep 24 #Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
Sep 23 #Javascript
浅谈Web页面向后台提交数据的方式和选择
Sep 23 #Javascript
Angular中使用ui router实现系统权限控制及开发遇到问题
Sep 23 #Javascript
You might like
PHPExcel中文帮助手册|PHPExcel使用方法(分享)
2017/06/09 PHP
ajax无刷新动态调用股票信息(改良版)
2008/11/01 Javascript
JQuery UI的拖拽功能实现方法小结
2012/03/14 Javascript
javascript ie6兼容position:fixed实现思路
2013/04/01 Javascript
jquery点击页面任何区域实现鼠标焦点十字效果
2013/06/21 Javascript
JQuery记住用户名和密码的具体实现
2014/04/04 Javascript
jQuery的图片滑块焦点图插件整理推荐
2014/12/07 Javascript
JavaScript中常用的六种互动方法示例
2015/03/13 Javascript
jquery实现右键菜单插件
2015/03/29 Javascript
浅析四种常见的Javascript声明循环变量的书写方式
2015/10/14 Javascript
js实现加载更多功能实例
2016/10/27 Javascript
JS完成画圆圈的小球
2017/03/07 Javascript
基于js中的原型(全面讲解)
2017/09/19 Javascript
vue-for循环嵌套操作示例
2019/01/28 Javascript
layer更改皮肤的实现方法
2019/09/11 Javascript
解决微信小程序scroll-view组件无横向滚动的问题
2020/02/04 Javascript
node.js使用yargs处理命令行参数操作示例
2020/02/11 Javascript
基于JQuery实现页面定时弹出广告
2020/05/08 jQuery
javascript贪吃蛇游戏设计与实现
2020/09/17 Javascript
Vue获取微博授权URL代码实例
2020/11/04 Javascript
11个Javascript小技巧帮你提升代码质量(小结)
2020/12/28 Javascript
[01:20]PWL开团时刻DAY9——听说潮汐没用?
2020/11/10 DOTA
python爬取足球直播吧五大联赛积分榜
2018/06/13 Python
python版DDOS攻击脚本
2019/06/12 Python
Python print不能立即打印的解决方式
2020/02/19 Python
python中wheel的用法整理
2020/06/15 Python
浅谈Python里面None True False之间的区别
2020/07/09 Python
python画图时设置分辨率和画布大小的实现(plt.figure())
2021/01/08 Python
css3中背景尺寸background-size详解
2014/09/02 HTML / CSS
阿拉伯世界最大的电子商务网站:Souq沙特阿拉伯
2016/10/28 全球购物
初中物理教学反思
2014/01/14 职场文书
市三好学生主要事迹
2014/01/28 职场文书
2014年信息技术工作总结
2014/12/16 职场文书
春风化雨观后感
2015/06/11 职场文书
MySQL pt-slave-restart工具的使用简介
2021/04/07 MySQL
浅谈MySQL next-key lock 加锁范围
2021/06/07 MySQL