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

2019-11-20 08:53:53

字体：大中小

来源：转载

供稿：网友

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

第一次尝试用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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：简单的js表格操作

下一篇：轻松实现js选项卡切换效果