用canvas制作彩虹球喷枪（js面向对象小案例）

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

canvas.gif

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

下面开始简单介绍代码：

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

案例全部代码：