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

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

第一次尝试用js面向对象的方式来写，经验不足，还请大家多多包涵。 

下面开始简单介绍代码： 

canvas画布：
复制代码 代码如下:

彩虹球的随机颜色是通过下面两个方法来实现的，在《js常用方法和一些封装（2） -- 随机数生成》中曾经提到过。

 
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;
 }
} 

案例全部代码：

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