js实现RainbowBall的面向对象的画布效果
以前在画布上学习的时候，觉得蛮好玩的，写了一个小demo，效果如下：第一次尝试用JS面向对象的方式来写，缺乏经验，也请你多多包涵。
下面是代码的简要介绍：
画布油画：
复制代码代码如下所示：
彩虹球的随机颜色是通过以下两种方法实现的。在JS常用的方法和一些封装（2）中都提到过--随机数生成。
*获得一个随机数为0 ~（闭区间）
* /
功能randomnum（NUM）{
返回math.floor（Math.random（）*（数+ 1））；
}；
*获得随机颜色（支持任何浏览器）
* /
功能randomcolor16（）{
/ / 0-255
randomnum VAR r（255），ToString（16）；
var g = randomnum（255），ToString（16）；
var b = randomnum（255），ToString（16）；
255的数目被转换为十六。
如果（r.length＜2）r =0+ R；
如果（g.length＜2）G =0+ g；
如果（b.length＜2）B =0+ B；
返回#+ R+G+B；
}；
当我单击时，我随机地在矩形区域中产生不同颜色的彩虹球。彩虹球的位置也是随机的。
*
*获得一系列随机数（闭合区间）
* /
功能randomrange（开始、结束）{
返回math.floor（Math.random（）*（开始+ 1））+开始；
}；
接下来是彩虹球的类，它是用面向对象完成的。
彩虹球类
Var（colorball =功能）{ }
colorball.prototype.left = 0； / / X轴
colorball.prototype.top = 0； / / Y轴
colorball。原型。R = 10； / /半径
在这种情况下，鼠标相当于彩虹球枪，我们也用面向对象的思想来设计它：
/ / RainbowBrush彩虹喷枪
RainbowBrush =函数（）{ }
球阵的生产方法
rainbowbrush.prototype.getballs =功能（NUM）{
无功colorballs = { }；
对于（var i = 0；i <数字；i + +）{
VaR球=新colorball（）；
ColorBalls.push（球）；
}
返回colorballs；
}
/ /喷刷彩虹球
RainbowBrush.prototype.brush =功能（上下文，球，x，y）{
balls.foreach（功能（balliem）{）
balliem。x = randomrange（X 6，X 6）；
BallIem。Y = randomrange（Y 6、Y + 6）；
balliem R = 5；
Context.beginPath（）；
背景。fillStyle = randomcolor16（）；
context.arc（balliem。X，Y，balliem。balliem。R，0、数学。π×2）；
Context.fill（）；
}）
}
它有两种方法，一种是制作彩虹球，另一种是喷彩虹球。
本案的主要逻辑如下：
var RainbowBrush =新（RainbowBrush）； / /初始化彩虹球枪
VaR球= rainbowbrush.getballs（1）；
当鼠标被按下时
canvasdom.onmousedown =函数（）{
var标志=真；
canvasdom.onmousemove =功能（e）{
var x = e.clientx；
var y = e.clienty；
如果（旗）rainbowbrush.brush（上下文，球，x，y）；
}
canvasdom.onmouseup =函数（）{
标志=假；
}
}
案件的全部代码：
彩虹球枪
*获得一个随机数为0 ~（闭区间）
* /
功能randomnum（NUM）{
返回math.floor（Math.random（）*（数+ 1））；
}；
*
*获得一系列随机数（闭合区间）
* /
功能randomrange（开始、结束）{
返回math.floor（Math.random（）*（开始+ 1））+开始；
}；
*获得随机颜色（支持任何浏览器）
* /
功能randomcolor16（）{
/ / 0-255
randomnum VAR r（255），ToString（16）；
var g = randomnum（255），ToString（16）；
var b = randomnum（255），ToString（16）；
255的数目被转换为十六。
如果（r.length＜2）r =0+ R；
如果（g.length＜2）G =0+ g；
If (b.length<2) B = 0 +b;
返回#+ R+G+B；
}；
无功canvasdom = document.getelementbyid（'canvas）；
VaR上下文= canvasdom.getcontext（二维的）；
VaR最大= 1050；
VaR最大高度= 500；
彩虹球类
Var（colorball =功能）{ }
colorball.prototype.left = 0； / / X轴
colorball.prototype.top = 0； / / Y轴
colorball。原型。R = 10； / /半径
/ / RainbowBrush彩虹喷枪
RainbowBrush =函数（）{ }
球阵的生产方法
rainbowbrush.prototype.getballs =功能（NUM）{
无功colorballs = { }；
对于（var i = 0；i <数字；i + +）{
VaR球=新colorball（）；
ColorBalls.push（球）；
}
返回colorballs；
}
/ /喷刷彩虹球
RainbowBrush.prototype.brush =功能（上下文，球，x，y）{
balls.foreach（功能（balliem）{）
balliem。x = randomrange（X 6，X 6）；
BallIem。Y = randomrange（Y 6、Y + 6）；
balliem R = 5；
Context.beginPath（）；
背景。fillStyle = randomcolor16（）；
context.arc（balliem。X，Y，balliem。balliem。R，0、数学。π×2）；
Context.fill（）；
}）
}
var RainbowBrush =新（RainbowBrush）； / /初始化彩虹球枪
VaR球= rainbowbrush.getballs（1）；
当鼠标被按下时
canvasdom.onmousedown =函数（）{
var标志=真；
canvasdom.onmousemove =功能（e）{
var x = e.clientx；
var y = e.clienty；
如果（旗）rainbowbrush.brush（上下文，球，x，y）；
}
canvasdom.onmouseup =函数（）{
标志=假；
}
}
以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。