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 相关文章推荐
关于html+ashx开发中几个问题的解决方法
Jul 18 Javascript
使用js修改客户端注册表的方法
Aug 09 Javascript
使用js写的一个简易的投票
Nov 27 Javascript
JavaScript操作URL的相关内容集锦
Oct 29 Javascript
JavaScript中一些特殊的字符运算
Aug 17 Javascript
JavaScript中click和onclick本质区别与用法分析
Jun 07 Javascript
js实现各浏览器全屏代码实例
Jul 03 Javascript
彻底弄懂 JavaScript 执行机制
Oct 23 Javascript
vue.js仿hover效果的实现方法示例
Jan 28 Javascript
解决layui动态添加的元素click等事件触发不了的问题
Sep 20 Javascript
vue - vue.config.js中devServer配置方式
Oct 30 Javascript
jquery实现手风琴案例
May 04 jQuery
轻松实现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添加MySQL数据记录代码
2008/06/07 PHP
php简单的留言板与回复功能具体实现
2014/02/19 PHP
php简单计算页面加载时间的方法
2015/06/19 PHP
php使用MySQL保存session会话的方法
2015/06/26 PHP
PHP替换Word中变量并导出PDF图片的实现方法
2020/11/26 PHP
javascript下查找父节点的简单方法
2007/08/13 Javascript
JS阻止用户多次提交示例代码
2014/03/26 Javascript
仿JQuery输写高效JSLite代码的一些技巧
2015/01/13 Javascript
javascript转换日期字符串为Date日期对象的方法
2015/02/13 Javascript
jquery仅用6行代码实现滑动门效果
2015/09/07 Javascript
bootstrap实现弹窗和拖动效果
2016/01/03 Javascript
Javascript中apply、call、bind的巧妙使用
2016/08/18 Javascript
原生JS实现-星级评分系统的简单实例
2016/08/21 Javascript
微信小程序 聊天室简单实现
2017/04/19 Javascript
理解javascript async的用法
2017/08/22 Javascript
浅谈bootstrap layer.open中end的使用方法
2019/09/12 Javascript
浅谈Three.js截图并下载的大坑
2019/11/01 Javascript
python的numpy模块安装不成功简单解决方法总结
2017/12/23 Python
python使用KNN算法识别手写数字
2019/04/25 Python
用python给自己做一款小说阅读器过程详解
2019/07/11 Python
Python读取ini配置文件传参的简单示例
2021/01/05 Python
美国高街时尚品牌:OASAP
2016/07/24 全球购物
New Balance天猫官方旗舰店:始于1906年,百年慢跑品牌
2017/11/15 全球购物
美国迪克体育用品商店:DICK’S Sporting Goods
2018/07/24 全球购物
文秘专业大学生求职信
2013/11/10 职场文书
毕业求职自荐信格式是什么
2013/11/19 职场文书
养殖项目策划书范文
2014/01/13 职场文书
大学秋游活动方案
2014/02/11 职场文书
《与朱元思书》的教学反思
2014/04/17 职场文书
给老婆道歉的话
2015/01/20 职场文书
职工宿舍管理制度
2015/08/05 职场文书
《水浒传》读后感3篇(范文)
2019/09/19 职场文书
Go语言切片前或中间插入项与内置copy()函数详解
2021/04/27 Golang
Go语言中break label与goto label的区别
2021/04/28 Golang
Python图像处理库PIL详细使用说明
2022/04/06 Python
python神经网络ResNet50模型
2022/05/06 Python