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 相关文章推荐
js类中获取外部函数名的方法
Aug 19 Javascript
21个值得收藏的Javascript技巧
Feb 04 Javascript
jQuery获取和设置表单元素的方法
Feb 14 Javascript
js实现数组转换成json
Jun 26 Javascript
JS实现选中当前菜单后高亮显示的导航条效果
Oct 15 Javascript
IScroll5 中文API参数说明和调用方法
May 21 Javascript
js实现动态创建的元素绑定事件
Jul 19 Javascript
jQuery设置Easyui校验规则(推荐)
Nov 21 Javascript
vue-cli V3.0版本的使用详解
Oct 24 Javascript
Vue表单输入绑定的示例代码
Nov 01 Javascript
vue中的ref和$refs的使用
Nov 22 Javascript
JavaScript async/await原理及实例解析
Dec 02 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超级全局变量
2010/01/26 PHP
ThinkPHP和UCenter接口冲突的解决方法
2016/07/25 PHP
PHP使用new StdClass()创建空对象的方法分析
2017/06/06 PHP
Yii Framework框架使用PHPExcel组件的方法示例
2019/07/24 PHP
laravel高级的Join语法详解以及使用Join多个条件
2019/10/16 PHP
childNodes.length与children.length的区别
2009/05/14 Javascript
jqPlot Option配置对象详解
2009/07/25 Javascript
JQuery 浮动导航栏实现代码
2009/08/27 Javascript
javascript Math.random()随机数函数
2009/11/04 Javascript
javascript适合移动端的日期时间拾取器
2015/11/10 Javascript
AngularJS基础 ng-mouseover 指令简单示例
2016/08/02 Javascript
Easyui的组合框的取值与赋值
2016/10/28 Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
2016/12/14 Javascript
一个例子轻松学会Vue.js
2017/01/02 Javascript
layui框架中layer父子页面交互的方法分析
2017/11/15 Javascript
利用JQUERY实现多个AJAX请求等待的实例
2017/12/14 jQuery
angular2模块和共享模块详解
2018/04/08 Javascript
javascript实现文字跑马灯效果
2020/06/18 Javascript
用vue写一个日历
2020/11/02 Javascript
Python实现多线程抓取妹子图
2015/08/08 Python
Python环境下安装使用异步任务队列包Celery的基础教程
2016/05/07 Python
详解python上传文件和字符到PHP服务器
2017/11/24 Python
Python使用pickle模块存储数据报错解决示例代码
2018/01/26 Python
使用EduBlock轻松学习Python编程
2018/10/08 Python
自适应线性神经网络Adaline的python实现详解
2019/09/30 Python
pycharm激活码有效到2020年11月底
2020/09/18 Python
python GUI库图形界面开发之PyQt5选项卡控件QTabWidget详细使用方法与实例
2020/03/01 Python
django模板获取list中指定索引的值方式
2020/05/14 Python
CSS3实现可关闭的下拉手风琴菜单效果
2015/08/31 HTML / CSS
LightInTheBox法国站:中国跨境电商
2020/03/05 全球购物
抵押贷款承诺书
2014/05/30 职场文书
2015年端午节国旗下演讲稿
2015/03/19 职场文书
乡镇法制宣传日活动总结
2015/05/05 职场文书
退休欢送会主持词
2015/07/01 职场文书
幼儿园班级管理心得体会
2016/01/07 职场文书
PyTorch的Debug指南
2021/05/07 Python