老早寫了一個商城的項目，其中有一個很有意思的東西就是仿淘寶芝麻信用那個轉圈的效果，當初也是看人家的代碼，剛開始看到時候有點懵，后來看了幾天總算弄明白原理了，效果圖如下：
代碼先貼上：最近有點忙，權當記錄：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery.1.8.2.min.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> .wdxy-top{width: 100%;height:500px;} .wdxy-top #clockBoard{position:relative;width: 550px;height: 470px;margin-top:-70px;margin-left:96px;} .wdxy-top #pointer{position: absolute;top:0;} </style> </head> <body style="height:2000px;"> <div class="wdxy-top"> <h1>我的信用</h1> <div id="clockBoard"> <canvas id="clock" width="550px" height="560px"></canvas> <canvas id="pointer" width="550px" height="560px"></canvas> </div> </div> <script type="text/javascript"> window.onload = function(){ var canvas=document.getElementById('clock'); var ctx=canvas.getContext('2d'); // 繪制外環 ctx.beginPath(); ctx.arc(275,330,180,30/180*Math.PI,150/180*Math.PI,true); ctx.strokeStyle='#7d91f2'; ctx.lineWidth='3' //.strock()官方解釋是會實際的繪制出moveTo()和lineTo()方法定義的路徑，在這里沒什么實際意義，我把它去掉也不會受影響，看的前輩的代碼，出於還是先放着吧！ ctx.stroke(); ctx.closePath(); // 繪制內環 ctx.beginPath(); ctx.arc(275,330,140,30/180*Math.PI,150/180*Math.PI,true); ctx.strokeStyle='#7d91f2'; ctx.lineWidth='12'; ctx.stroke(); ctx.closePath(); ctx.translate(275,330); // 繪制刻度 var total=[400,'較差',600,'中等',800,'良好',1000,'優秀',1200,'極好',1400]; for(var i = 0;i<17;i++){ if(i%6===3){ ctx.beginPath(); ctx.lineWidth = '5'; ctx.strokeStyle = "#7d91f2"; ctx.moveTo(137*Math.sin(7.5*i/180*Math.PI),-137*Math.cos(7.5*i/180*Math.PI)); ctx.lineTo(155*Math.sin(7.5*i/180*Math.PI),-155*Math.cos(7.5*i/180*Math.PI)); ctx.moveTo(-137*Math.sin(7.5*i/180*Math.PI),-137*Math.cos(7.5*i/180*Math.PI)); ctx.lineTo(-155*Math.sin(7.5*i/180*Math.PI),-155*Math.cos(7.5*i/180*Math.PI)); ctx.stroke(); ctx.closePath(); }else{ ctx.beginPath(); ctx.lineWidth = '3'; ctx.strokeStyle = '#7d91f2'; ctx.moveTo(136*Math.sin(7.5*i/180*Math.PI),-136*Math.cos(7.5*i/180*Math.PI)); ctx.lineTo(150*Math.sin(7.5*i/180*Math.PI),-150*Math.cos(7.5*i/180*Math.PI)); ctx.moveTo(-136*Math.sin(7.5*i/180*Math.PI),-136*Math.cos(7.5*i/180*Math.PI)); ctx.lineTo(-150*Math.sin(7.5*i/180*Math.PI),-150*Math.cos(7.5*i/180*Math.PI)); ctx.stroke(); ctx.closePath(); } } // 繪制文本 ctx.font=''; ctx.fillStyle='#7d91f2'; ctx.textAlign='center'; ctx.textBaseline='bottom'; ctx.rotate((-7.5*15)/180*Math.PI); for(var i=0;i<11;i++){ ctx.fillStyle=i%2? '#7d91f2':'#7d91f2'; ctx.fillText(total[i],0,-155); ctx.rotate((7.5*3)/180*Math.PI); } ctx.rotate(-7.5*18/180*Math.PI); ctx.fillStyle='#7d91f2'; ctx.font='20px normal'; ctx.fillText('BETA',0,-60); ctx.font='14px normal'; // 獲取當前日期 var date=new Date(); var ymd=date.getFullYear()+'.'+(date.getMonth()+1)+'.'+date.getDate(); ctx.fillText('評估時間 : '+ymd,0,95); ctx.font='45px bold'; // 繪制動畫需要重置幕布，所以重建一個canvas對象 var pointer=document.getElementById('pointer'); var ctxPoint=pointer.getContext('2d'); function run(inputValue){ var timer; var i=0; ctxPoint.translate(275,330); ctxPoint.fillStyle ='#7d91f2'; ctxPoint.strokeStyle='#7d91f2'; // 設置最終的值 var finalValue=inputValue; var value=0; // 根據值的大小確定應該到達的位置 if(finalValue<600){ value = (finalValue-357.82)*0.225; }else if(finalValue<1200){ value = (finalValue-600)*0.225+52.5; }else{ value = finalValue > 1400 ?1400:finalValue; value = (value-1200)*0.27+187.5; } var evalue = ' '; if(inputValue<600){ evalue='較差'; }else if(inputValue<800){ evalue='中等'; }else if(inputValue<1000){ evalue='良好'; }else if(inputValue<1200){ evalue='優秀'; }else{ evalue='極好'; } ctxPoint.font='95px bold'; ctxPoint.textAlign='center'; ctxPoint.shadowColor='#7d91f2'; // 所有的動畫事件 function slideValue(){ ctxPoint.translate(-275,-330); ctxPoint.clearRect(0,0,pointer.width,pointer.height); ctxPoint.translate(275,330); i++; // 繪制滾動元素 ctxPoint.beginPath(); ctxPoint.shadowBlur=30; ctxPoint.arc(-180*Math.sin((i+60)/180*Math.PI),180*Math.cos((i+60)/180*Math.PI),5,0,2*Math.PI,true); ctxPoint.fillStyle='#7d91f2'; ctxPoint.fill(); ctxPoint.arc(-180*Math.sin((i+60)/180*Math.PI),180*Math.cos((i+60)/180*Math.PI),3,0,2*Math.PI,true); ctxPoint.fillStyle='#7d91f2'; ctxPoint.fill(); // 填充分數和評分 ctxPoint.font='95px bold'; var text=0; if(i<52.5){ text=i/0.225+357.8; }else if(i<187.5){ text=(i-52.5)/0.225+600; }else{ text=(i-187.5)/0.27+1200; text=text>1400?1400:text; } text=text>inputValue?inputValue:text; ctxPoint.shadowBlur=0; ctxPoint.fillText(parseInt(text,10),0,35); ctxPoint.stroke(); ctxPoint.font='35px bold'; ctxPoint.stroke(); ctxPoint.closePath(); // 如果到達所需要的弧度，則停止，否則繼續跳動 if(i>value){ setTimeout(function(){ ctxPoint.fillText('信用'+evalue,0,70); },200); clearTimeout(timer); }else{ timer=setTimeout(slideValue,text/finalValue*15); } } slideValue(); } // 打開頁面時默認的跳動數字 run(876); // 重新繪制的函數 // var runBtn=document.getElementById('run'); // var valueInput=document.getElementById('value'); // function reRun(){ // // 判斷輸入的內容是否合乎預期 // if(isNaN(parseInt(valueInput.value),10)){ // return 0; // } // ctxPoint.translate(-275,-330); // run(parseInt(valueInput.value,10)); // } // // 按鈕事件，當點擊時重新繪制 // runBtn.onclick=reRun; // // 鍵盤事件，當輸入數字回車后重新繪制 // window.document.onkeydown = function(e){ // var e=e||window.event; // if(e.keyCode===13){ // reRun(); // } // } } </script> </body> </html>