前段時間在研究canvas，感覺還挺好玩的，就寫了一個小demo，效果如下：
第一次嘗試用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; }} 案例全部代碼：
<!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>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
