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

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

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

下面开始简单介绍代码：

canvas画布：
复制代码代码如下:<canvas id="canvas" width="1050" height="500" style="background:#333;overflow: hidden;"></canvas>

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

 /** * 获取 0 ~ num的随机数（闭区间） */function randomNum（num）{ return Math.floor（Math.random（）*（num+1））;};/** * 获取随机颜色（支持任意浏览器） */function randomColor16（）{ //0-255var 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-255var 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>

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