基于canvas實現(xiàn)的絢麗圓圈效果完整實例
更新時間:2016年01月26日 10:52:50 作者:m1870164
這篇文章主要介紹了基于canvas實現(xiàn)的絢麗圓圈效果,以完整實例形式分析了JavaScript結(jié)合html5的canvas實現(xiàn)動態(tài)圖形的繪制技巧,需要的朋友可以參考下
本文實例講述了基于canvas實現(xiàn)的絢麗圓圈效果。分享給大家供大家參考,具體如下:
運行效果截圖如下:
具體代碼如下:
<!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>
更多關(guān)于js特效相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery動畫與特效用法總結(jié)》及《jQuery常見經(jīng)典特效匯總》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
您可能感興趣的文章:
- JavaScript+html5 canvas繪制的圓弧蕩秋千效果完整實例
- javascript+HTML5的Canvas實現(xiàn)Lab單車動畫效果
- javascript+HTML5的canvas實現(xiàn)七夕情人節(jié)3D玫瑰花效果代碼
- js+html5實現(xiàn)canvas繪制圓形圖案的方法
- js+html5實現(xiàn)canvas繪制簡單矩形的方法
- js+html5實現(xiàn)canvas繪制鏤空字體文本的方法
- js+html5通過canvas指定開始和結(jié)束點繪制線條的方法
- js+HTML5實現(xiàn)canvas多種顏色漸變效果的方法
- js+html5繪制圖片到canvas的方法
- html5 canvas js(數(shù)字時鐘)實例代碼
- 基于canvas實現(xiàn)的鐘擺效果完整實例
- JavaScript+html5 canvas繪制漸變區(qū)域完整實例
相關(guān)文章
JavaScript高級程序設(shè)計 閱讀筆記(十八) js跨平臺的事件
js跨平臺的事件經(jīng)驗分享,需要的朋友可以參考下2012-08-08javascript使用switch case實現(xiàn)動態(tài)改變超級鏈接文字及地址
這篇文章主要介紹了javascript使用switch case實現(xiàn)動態(tài)改變超級鏈接文字及地址,需要的朋友可以參考下2014-12-12JavaScript SHA1加密算法實現(xiàn)詳細(xì)代碼
這篇文章主要為大家詳細(xì)介紹了JavaScript SHA1加密算法實現(xiàn)代碼,具有一定的參考價值,感興趣的朋友可以參考一下2016-10-10