JavaScript html5画布制作的圆中圆效果实例

本文实例讲述了JavaScript html5画布制作的圆中圆效果。分享给大家供大家参考，具体如下：

运行效果截图如下：

具体代码如下：

！DOCTYPE html html标题演示/标题样式类型=' text/CSS ' # canvas { background : # F2；高度：500 px高度：500 px页边距-顶部：100像素；左边距left :200 px }/style/head body canvas id=' canvas ' width=' 500 px ' height=' 500 px '/canvas/body script type=' text/JavaScript '(function(){ var dyl={ }；戴尔。getdom=function(id){返回文档。getelementbyid(id)；}戴尔。get context=function(canvasID){ var canvas=this。getdom(canvasID)；if(！canvas){ return null；}返回帆布。get context(' 2d ')；} if(！窗户。dyl){ window。dyl=dyl} })();缓存={ };缓存。context=dyl。getcontext(' canvas ')；//每个圈的圆个数控制缓存。scalenMB=6；缓存。create COlOr=function(){ var COlOr=' RGB '；颜色=数学。圆(数学。random()* 255)；color='，'；颜色=数学。圆(数学。random()* 255)；color='，'；颜色=数学。圆(数学。random()* 255)；color=')'；返回颜色；};缓存。draw=function(){ cache。语境。fill rect(-10，-10，20，20)；for(var I=1；i10I){缓存。语境。save()；for(var j=0；jcache。scalenMB * I；j ) { cache.context.rotate(Math .PI * 2/(缓存。scalenMB * I))；缓存。语境。fillstyle=缓存。创建颜色()；缓存。语境。begin path()；cache.context.arc(0，20*i，5，0，Math .PI*2，真);缓存。语境。close path()；缓存。语境。fill()；}缓存。语境。restore()；} };缓存。init=function(){ cache。语境。翻译(250，250)；缓存。draw()；};缓存。init()；/script/html更多关于射流研究…特效相关内容感兴趣的读者可查看本站专题： 《jQuery动画与特效用法总结》 、 《jQuery常见经典特效汇总》 及《JavaScript动画特效与技巧汇总》

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