基于帆布实现的绚丽圆圈效果完整实例

本文实例讲述了基于帆布实现的绚丽圆圈效果。分享给大家供大家参考，具体如下：

运行效果截图如下：

具体代码如下：

！DOCTYPE html html标题演示/标题样式类型=' text/CSS '正文{ margin :0背景：黑色；} #画布{ border:3px纯灰色；盒影：0 px 0px 2px 2px # D5D5D5左边距left :100 pxmargin-top :50 px；} # power { position : fixedbottom :50 pxright :50 px } # power a { color : green文本装饰：无；显示：内嵌块；padd :20 pxborder :2 px纯橙色；box-shadow:0px 0px 2px 2px蓝色；font-size :30 px}/style/head body canvas id=' canvas ' width=' 500 px ' height=' 500 px '/canvas script type=' text/JavaScript ' var canvas=document。getelementbyid(' canvas ')；var CTX=画布。get context(' 2d ')；var color list=' abcdefbcdef 0123456789 ' .拆分("");var colorListLength=colorlist。长度；var arcList=[]；函数创建ARc(attr){ CTX。begin path()；CTX。FillStyle=attr。颜色| | '黑色'；ctx.arc(attr.x，attr.y，attr.r，0，Math .PI * 2)；CTX。close path()；CTX。fill()；} function color(){ var color=' # '；for(var I=0；i6；I){ color=color list[数学。圆(数学。random()*颜色列表长度)]；}返回颜色；}函数Arc(){这个。计数=0；这个。r=5；这个。x=数学。圆(数学。random()* 500)；这个。add=数学。圆(数学。random()* 5)；这个。极限=数学。圆(数学。random()* 100)这个。模式=数学。圆(数学。random())；var _ self=this_ self。run=function(){ if(_ self。r=_ self。limit){ _ self。run=null返回；} _ self。x=_ self。添加*(自我。mode==1？1 : -1);createArc({x: _self.x，y :路径。圆(数学。random()* 400)、r: _self.r、color : color()})；_ self。r=5；return _ self }；归还这个；} var init _ count=150 var init _ time=0；var init=function(){ init _ time；arclist。长度=0；for(var I=0；iinit _ counti ) { arcList.push(新arc())；} };var ReInit=function(){ var angle=Math .PI * 2/init _ count；for(var I=0；iinit _ countI){ var _ angle=I * angle；创建ARc({ x : 250 250 * Math。cos(_ angle)，y: 250 250*Math.sin(_angle)，r: 5，color : color()})；创建ARc({ x : 250 200 * Math。cos(_ angle)，y: 250 200*Math.sin(_angle)，r: 5，color : color()})；创建ARc({ x : 250 150 * Math。cos(_ angle)，y: 250 150*Math.sin(_angle)，r: 5，color : color()})；创建ARc({ x : 250 100 * Math。cos(_ angle)，y: 250 100*Math.sin(_angle)，r: 5，color : color()})；} };init()；var全局区间=setInterval(函数(){ CTX。透明矩形(0，0，500，500)；定义变量计数=0;for(var I=0；iinit _ countI){ var arc=arcList[I]；arc.run？arc.run() :计数；} if(count==init _ count){ if(init _ time=2){ ReInit()；返回；} init()；} }, 100);/脚本/正文/html更多关于射流研究…特效相关内容感兴趣的读者可查看本站专题： 《jQuery动画与特效用法总结》 及《jQuery常见经典特效汇总》

希望本文所述对大家Java脚本语言程序设计有所帮助。