js面向?qū)ο髮?shí)現(xiàn)canvas制作彩虹球噴槍效果

更新時(shí)間：2016年09月24日 10:48:11 作者：剽悍一小兔

這篇文章主要介紹了js面向?qū)ο髮?shí)現(xiàn)canvas制作彩虹球噴槍效果,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

前段時(shí)間在研究canvas，感覺(jué)還挺好玩的，就寫了一個(gè)小demo，效果如下：

第一次嘗試用js面向?qū)ο蟮姆绞絹?lái)寫，經(jīng)驗(yàn)不足，還請(qǐng)大家多多包涵。

下面開(kāi)始簡(jiǎn)單介紹代碼：

canvas畫布：

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

彩虹球的隨機(jī)顏色是通過(guò)下面兩個(gè)方法來(lái)實(shí)現(xiàn)的，在《js常用方法和一些封裝（2） -- 隨機(jī)數(shù)生成》中曾經(jīng)提到過(guò)。

 /**
 * 獲取 0 ~ num的隨機(jī)數(shù)（閉區(qū)間）
 */
function randomNum(num){
 return Math.floor(Math.random()*(num+1));
};

/**
 * 獲取隨機(jī)顏色（支持任意瀏覽器）
 */
function randomColor16(){
 //0-255 
 var r = randomNum(255).toString(16);
 var g = randomNum(255).toString(16);
 var b = randomNum(255).toString(16);
 //255的數(shù)字轉(zhuǎn)換成十六進(jìn)制
 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;
};

每當(dāng)我鼠標(biāo)點(diǎn)下，其實(shí)是在一個(gè)矩形區(qū)域隨機(jī)產(chǎn)生不同顏色的彩虹球，彩虹球出現(xiàn)的位置也是隨機(jī)的，通過(guò)范圍隨機(jī)數(shù)來(lái)實(shí)現(xiàn)：

 /*
 * 獲取范圍隨機(jī)數(shù) （閉區(qū)間）
 */
function randomRange(start,end){
 return Math.floor(Math.random()*(end-start+1))+start;
};

接下來(lái)是彩虹球的類，用面向?qū)ο髞?lái)做。

 //彩虹球的類
var ColorBall = function(){}

ColorBall.prototype.left = 0; //X軸
ColorBall.prototype.top = 0; //y軸
ColorBall.prototype.r = 10; //半徑

在本案例中，鼠標(biāo)相當(dāng)于是彩虹球噴槍，我們也用面向?qū)ο蟮乃枷雭?lái)設(shè)計(jì)它：

 //RainbowBrush 彩虹球噴槍
RainbowBrush = function(){}

//生產(chǎn)小球數(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();
 })
 
}

它有兩個(gè)方法，一個(gè)是生產(chǎn)彩虹球，另一個(gè)是噴刷彩虹球。

案例的主要邏輯如下：

 var rainbowBrush = new RainbowBrush(); //初始化彩虹球噴槍
var balls = rainbowBrush.getBalls(1);

//當(dāng)鼠標(biāo)按下
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的隨機(jī)數(shù)（閉區(qū)間）
   */
  function randomNum(num){
   return Math.floor(Math.random()*(num+1));
  };

  /*
   * 獲取范圍隨機(jī)數(shù) （閉區(qū)間）
   */
  function randomRange(start,end){
   return Math.floor(Math.random()*(end-start+1))+start;
  };
  
  
  /**
   * 獲取隨機(jī)顏色（支持任意瀏覽器）
   */
  function randomColor16(){
   //0-255 
   var r = randomNum(255).toString(16);
   var g = randomNum(255).toString(16);
   var b = randomNum(255).toString(16);
   //255的數(shù)字轉(zhuǎn)換成十六進(jìn)制
   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(){}
  
  //生產(chǎn)小球數(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);

  //當(dāng)鼠標(biāo)按下
  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>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: