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 相关文章推荐
不错的一个日期输入 动态
Nov 06 Javascript
将文本输入框内容加入表中的js代码
Aug 18 Javascript
JS复制对应id的内容到粘贴板(Ctrl+C效果)
Jan 23 Javascript
老生常谈javascript中逻辑运算符&amp;&amp;和||的返回值问题
Apr 13 Javascript
微信小程序 flex实现导航实例详解
Apr 26 Javascript
简单实现jQuery弹幕效果
May 06 jQuery
vue实现留言板todolist功能
Aug 16 Javascript
vue移动端路由切换实例分析
May 14 Javascript
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
Vue 用Vant实现时间选择器的示例代码
Oct 25 Javascript
react 不用插件实现数字滚动的效果示例
Apr 14 Javascript
vue中axios封装使用的完整教程
Mar 03 Vue.js
轻松实现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的一些基础知识分享
2011/07/27 PHP
一些php项目中比较通用的php自建函数的详解
2013/06/06 PHP
分享PHP header函数使用教程
2013/09/05 PHP
php数值转换时间及时间转换数值用法示例
2017/05/18 PHP
PHP大文件切割上传并带进度条功能示例
2019/07/01 PHP
深入理解PHP+Mysql分布式事务与解决方案
2020/12/03 PHP
Javascript实现的分页函数
2006/12/22 Javascript
Js实现无刷新删除内容
2015/04/29 Javascript
Javascript刷新窗口方法小结
2015/10/21 Javascript
jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)
2016/06/08 Javascript
微信小程序 WebSocket详解及应用
2017/01/21 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)
2017/05/11 Javascript
浅谈angular4生命周期钩子
2017/09/05 Javascript
Vue 2.0学习笔记之Vue中的computed属性
2017/10/16 Javascript
微信小程序调用摄像头隐藏式拍照功能
2018/08/22 Javascript
JavaScript私有变量实例详解
2019/01/24 Javascript
Vue源码探究之虚拟节点的实现
2019/04/17 Javascript
深入浅析Vue 中 ref 的使用
2019/04/29 Javascript
Python 自动补全(vim)
2014/11/30 Python
浅谈django中的认证与登录
2016/10/31 Python
python对绑定事件的鼠标、按键的判断实例
2019/07/17 Python
Python for循环与getitem的关系详解
2020/01/02 Python
浅谈python3 构造函数和析构函数
2020/03/12 Python
Django中ORM找出内容不为空的数据实例
2020/05/20 Python
Python 实现一个简单的web服务器
2021/01/03 Python
Petmate品牌官方网站:宠物用品
2018/11/25 全球购物
客户代表实习人员自我鉴定
2013/09/27 职场文书
会计系个人求职信范文分享
2013/12/20 职场文书
你懂得怎么写自荐信吗?
2013/12/27 职场文书
采购意向书范本
2014/03/31 职场文书
父母对孩子的寄语
2014/04/09 职场文书
高一学年自我鉴定范文(3篇)
2014/09/26 职场文书
2014年助理政工师工作总结
2014/12/19 职场文书
教师个人成长总结
2015/02/11 职场文书
浅谈怎么给Python添加类型标注
2021/06/08 Python
React自定义hook的方法
2022/06/25 Javascript