基于canvas实现的绚丽圆圈效果完整实例
更新时间:2016年01月26日 10:52:50 作者:m1870164
这篇文章主要介绍了基于canvas实现的绚丽圆圈效果,以完整实例形式分析了JavaScript结合html5的canvas实现动态图形的绘制技巧,需要的朋友可以参考下
本文实例讲述了基于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>
更多关于js特效相关内容感兴趣的读者可查看本站专题:《jQuery动画与特效用法总结》及《jQuery常见经典特效汇总》
希望本文所述对大家JavaScript程序设计有所帮助。
您可能感兴趣的文章:
- JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
- javascript+HTML5的Canvas实现Lab单车动画效果
- javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
- js+html5实现canvas绘制圆形图案的方法
- js+html5实现canvas绘制简单矩形的方法
- js+html5实现canvas绘制镂空字体文本的方法
- js+html5通过canvas指定开始和结束点绘制线条的方法
- js+HTML5实现canvas多种颜色渐变效果的方法
- js+html5绘制图片到canvas的方法
- html5 canvas js(数字时钟)实例代码
- 基于canvas实现的钟摆效果完整实例
- JavaScript+html5 canvas绘制渐变区域完整实例
相关文章
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
js跨平台的事件经验分享,需要的朋友可以参考下2012-08-08javascript使用switch case实现动态改变超级链接文字及地址
这篇文章主要介绍了javascript使用switch case实现动态改变超级链接文字及地址,需要的朋友可以参考下2014-12-12
最新评论