本文实例讲述了基于canvas实现的绚丽圆圈效果。分享给大家供大家参考，具体如下：
运行效果截图如下：
具体代码如下：
<!DOCTYPE html> <html> <head> <title>demo</title> <style type="text/css"> body { margin:0; background:black; } #canvas { border:3px solid gray; box-shadow:0px 0px 2px 2px #D5D5D5; margin-left:100px; margin-top:50px; } #power { position:fixed; bottom:50px; right:50px; } #power a { color:green; text-decoration:none; display:inline-block; padding:20px; border:2px solid orange; box-shadow:0px 0px 2px 2px blue; font-size:30px; } </style> </head> <body> <canvas id="canvas" width="500px" height="500px"></canvas> <script type="text/javascript"> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var colorList = "abcdefABCDEF0123456789".split(""); var colorListLength = colorList.length; var arcList = []; function createArc(attr) { ctx.beginPath(); ctx.fillStyle = attr.color || "black"; ctx.arc(attr.x, attr.y, attr.r, 0, Math.PI*2); ctx.closePath(); ctx.fill(); } function color() { var color = "#"; for(var i=0; i<6; i++) { color += colorList[Math.round(Math.random()*colorListLength)]; } return color; } function Arc() { this.count = 0; this.r = 5; this.x = Math.round(Math.random()*500); this.add = Math.round(Math.random()*5); this.limit = Math.round(Math.random()*100) this.mode = Math.round(Math.random()); var _self = this; _self.run = function() { if(_self.r >= _self.limit) { _self.run = null; return; } _self.x += _self.add*(_self.mode == 1 ? 1 : -1); createArc({x: _self.x, y:Math.round(Math.random()*400), r: _self.r, color: color()}); _self.r += 5; return _self; }; return this; } var init_count = 150; var init_time = 0; var init = function() { init_time++; arcList.length = 0; for(var i=0; i<init_count; i++) { arcList.push(new Arc()); } }; var reInit = function() { var angle = Math.PI*2/init_count; for(var i=0; i<init_count; i++) { var _angle = i*angle; createArc({x: 250 + 250*Math.cos(_angle), y: 250 + 250*Math.sin(_angle), r: 5, color:color()}); createArc({x: 250 + 200*Math.cos(_angle), y: 250 + 200*Math.sin(_angle), r: 5, color:color()}); createArc({x: 250 + 150*Math.cos(_angle), y: 250 + 150*Math.sin(_angle), r: 5, color:color()}); createArc({x: 250 + 100*Math.cos(_angle), y: 250 + 100*Math.sin(_angle), r: 5, color:color()}); } }; init(); var globalInterval = setInterval(function() { ctx.clearRect(0, 0, 500, 500); var count = 0; for(var i=0; i<init_count; i++) { var arc = arcList[i]; arc.run ? arc.run() : count++; } if(count == init_count) { if(init_time >= 2) { reInit(); return; } init(); } }, 100); </script> </body> </html>
希望本文所述对大家JavaScript程序设计有所帮助。