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

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

下面开始简单介绍代码：

帆布画布：复制代码代码如下：画布id='画布'宽度=' 1050 '高度=' 500 '样式='背景： # 333；'隐藏飞越：/canvas

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

/** * 获取0 ~ num的随机数（闭区间)*/函数randomNum(num){返回数学。地板(数学。random()*(num 1))；};/** * 获取随机颜色（支持任意浏览器)*/函数random color 16(){//0-255 var r=random num(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 .长度2)g=' 0 ' g；if(b .长度2)b=' 0 ' b；返回“#”r g b；};

每当我鼠标点下，其实是在一个矩形区域随机产生不同颜色的彩虹球，彩虹球出现的位置也是随机的，通过范围随机数来实现：

/* * 获取范围随机数（闭区间)*/函数randomRange(开始，结束){返回数学。地板(数学。random()*(end-start 1))start；};接下来是彩虹球的类，用面向对象来做。

//彩虹球的类var color boll=function(){ } color boll。原型。left=0；//X轴彩球。原型。top=0；//y轴彩球。原型。r=10//半径在本案例中，鼠标相当于是彩虹球喷枪，我们也用面向对象的思想来设计它：

//RainbowBrush彩虹球喷枪RainbowBrush=function(){}//生产小球数组的方法彩虹刷。原型。getballs=function(num){ var color balls=[]；for(var I=0；I Numi){ var ball=new color ball()；colorBalls.push(球);}返回colorBalls}//喷刷彩虹球彩虹刷。原型。brush=function(context，balls，x，y){ balls。foreach(function(BallieM){ BallieM }。x=randomRange(x-6，x 6)；ballIem.y=randomRange(y - 6，y-6)；贝利厄姆。r=5；语境。begin path()；语境。fill style=random color 16()；context.arc(ballIem.x，ballIem.y，ballIem.r，0，Math .PI * 2)；语境。fill()；}) } 它有两个方法，一个是生产彩虹球，另一个是喷刷彩虹球。

案例的主要逻辑如下：

var rainbowBrush=new rainbowBrush()；//初始化彩虹球喷枪var balls=rainbowbrush。getballs(1)；//当鼠标按下canvasdom。onmousedown=function(){ var flag=true；canvasdom。onmousemove=function(e){ var x=e . client x；var y=e . client yif(flag)rainbowbrush。画笔(上下文，球，x，y)；} canvasdom。onmouseup=function(){ flag=false；}} 案例全部代码：

！DOCTYPE html html head meta charset=' UTF-8 '标题彩虹球喷枪/title/head body canvas id=' canvas ' width=' 1050 ' height=' 500 ' style=' background : # 333；'隐藏飞越：/画布/身体脚本类型='text/javascript' /** *获取0 ~ num的随机数（闭区间)*/函数randomNum(num){返回数学。地板(数学。random()*(num 1))；};/* * 获取范围随机数（闭区间)*/函数randomRange(开始，结束){返回数学。地板(数学。random()*(end-start 1))start；};/** * 获取随机颜色（支持任意浏览器)*/函数random color 16(){//0-255 var r=random num(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 .长度2)g=' 0 ' g；if(b .长度2)b=' 0 ' b；返回“#”r g b；};var canvasDom=document。getelementbyid(' canvasDom ')；var context=canvasdom。get context(' 2d ')；var MaxWidth=1050 var MaxHeight=500//彩虹球的类var color boll=function(){ } color boll。原型。left=0；//X轴彩球。原型。top=0；//y轴彩球。原型。r=10//半径//RainbowBrush彩虹球喷枪RainbowBrush=function(){} //生产小球数组的方法彩虹刷。原型。getballs=function(num){ var color balls=[]；for(var I=0；I Numi){ var ball=new color ball()；colorBalls.push(球);}返回colorBalls} //喷刷彩虹球彩虹刷。原型。brush=function(context，balls，x，y){ balls。foreach(function(BallieM){ BallieM }。x=randomRange(x-6，x 6)；ballIem.y=randomRange(y - 6，y-6)；贝利厄姆。r=5；语境。begin path()；语境。fill style=random color 16()；context.arc(ballIem.x，ballIem.y，ballIem.r，0，Math .PI * 2)；语境。fill()；})} var rainbowBrush=new rainbowBrush()；//初始化彩虹球喷枪var balls=rainbowbrush。getballs(1)；//当鼠标按下canvasdom。onmousedown=function(){ var flag=true；canvasdom。onmousemove=function(e){ var x=e . client x；var y=e . client yif(flag)rainbowbrush。画笔(上下文，球，x，y)；} canvasdom。onmouseup=function(){ flag=false；} }/脚本/html以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。