用canvas制作彩虹球噴槍(js面向對象小案例)

前段時間在研究canvas,感覺還挺好玩的,就寫了一個小demo,效果如下:

canvas.gif

第一次嘗試用js面向對象的方式來寫,經驗不足,還請大家多多包涵。

下面開始簡單介紹代碼:

canvas畫布:

<canvas id='canvas' width='1050' height='500' style='background:#333;overflow: hidden;'></canvas>

彩虹球的隨機顏色是通過下面兩個方法來實現(xiàn)的,在《js常用方法和一些封裝(2) -- 隨機數(shù)生成》中曾經提到過。

/**
 * 獲取 0 ~ num的隨機數(shù)(閉區(qū)間)
 */
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的數(shù)字轉換成十六進制
    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;
};
        

每當我鼠標點下,其實是在一個矩形區(qū)域隨機產生不同顏色的彩虹球,彩虹球出現(xiàn)的位置也是隨機的,通過范圍隨機數(shù)來實現(xiàn):

/*
 * 獲取范圍隨機數(shù) (閉區(qū)間)
 */
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(){}

//生產小球數(shù)組的方法
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的隨機數(shù)(閉區(qū)間)
         */
        function randomNum(num){
            return Math.floor(Math.random()*(num+1));
        };

        /*
         * 獲取范圍隨機數(shù) (閉區(qū)間)
         */
        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的數(shù)字轉換成十六進制
            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(){}
        
        //生產小球數(shù)組的方法
        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>
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容