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 相关文章推荐
不想让浏览器运行javascript脚本的方法
Nov 20 Javascript
javascript实现表单验证
Jan 29 Javascript
AngularJS基础 ng-readonly 指令简单示例
Aug 02 Javascript
javascript汉字拼音互转的简单实例
Oct 09 Javascript
10道典型的JavaScript面试题
Mar 22 Javascript
微信小程序 仿美团分类菜单 swiper分类菜单
Apr 12 Javascript
Bootstrap table中toolbar新增条件查询及refresh参数使用方法
May 18 Javascript
JavaScript实现浅拷贝与深拷贝的方法分析
Jul 05 Javascript
微信网页登录逻辑与实现方法
Apr 29 Javascript
微信小程序云开发详细教程
May 16 Javascript
基于JavaScript 实现拖放功能
Sep 12 Javascript
重置Redux的状态数据的方法实现
Nov 18 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
php strstr查找字符串中是否包含某些字符的查找函数
2010/06/03 PHP
PH P5.2至5.5、5.6的新增功能详解
2014/07/14 PHP
PHP 错误处理机制
2015/07/06 PHP
PHP记录和读取JSON格式日志文件
2016/07/07 PHP
PHP实现的策略模式示例
2019/03/20 PHP
用htc组件制作windows选项卡
2007/01/13 Javascript
来自chinaz的ajax获取评论代码
2008/05/03 Javascript
script的async属性以非阻塞的模式加载脚本
2013/01/15 Javascript
js清理Word格式示例代码
2014/02/13 Javascript
用js一次改变多个input的readonly属性值的方法
2014/06/11 Javascript
jQuery获得document和window对象宽度和高度的方法
2015/03/25 Javascript
JS实现自动定时切换的简洁网页选项卡效果
2015/10/13 Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
2017/02/14 Javascript
webpack教程之webpack.config.js配置文件
2017/07/05 Javascript
vue watch自动检测数据变化实时渲染的方法
2018/01/16 Javascript
vuejs前后端数据交互之从后端请求数据的实例
2018/08/11 Javascript
Angular设置别名alias的方法
2018/11/08 Javascript
[01:02:34]TFT vs VGJ.T Supermajor 败者组 BO3 第二场 6.5
2018/06/06 DOTA
[47:52]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第二场 11.26
2020/11/30 DOTA
简单介绍Python中的JSON模块
2015/04/08 Python
Python中字典的浅拷贝与深拷贝用法实例分析
2018/01/02 Python
python如何获取当前文件夹下所有文件名详解
2019/01/25 Python
Python利用scapy实现ARP欺骗的方法
2019/07/23 Python
python并发编程多进程 模拟抢票实现过程
2019/08/20 Python
关于django python manage.py startapp 应用名出错异常原因解析
2020/12/15 Python
英国最大的独立家具零售商:Furniture Village
2016/09/06 全球购物
北大研究生linux应用求职信
2013/10/29 职场文书
婚礼司仪主持词
2014/03/14 职场文书
养生餐厅创业计划书范文
2014/03/26 职场文书
研修心得体会
2014/09/04 职场文书
教师节横幅标语
2014/10/08 职场文书
2014年人事专员工作总结
2014/11/19 职场文书
新婚姻法离婚协议书范文
2014/11/30 职场文书
2015年汽车销售员工作总结
2015/07/24 职场文书
高中语文教学反思范文
2016/02/16 职场文书
python编写五子棋游戏
2021/05/25 Python