鏈€杩戦渶瑕佸紑鍙戜竴涓僵绁ㄨ浆鐩樼殑椤甸潰銆傚師浠ヤ负杩欑涓滆タ涓€瀹氭槸鐜版垚鐨勶紝缁撴灉鎵句簡涓€鍦堝彂鐜板拰鎴戜滑鐨勫熀鏈竴鏍枫€傝璁″浘鏈変簺鍑哄叆銆傚鏋滅洿鎺ョ敤鐜版垚鐨勫寘锛屽紑婧愰」鐩殑甯冨眬浼拌杩囦笉浜嗛獙鏀躲€傚紑婧愰」鐩殑甯冨眬涓€鑸槸杩欐牱鐨勶紙杞洏涓殑鏂囧瓧姝ｅ鐫€鍦嗗績锛夈€傛垜鎺ㄨ崘涓€涓祦琛岀殑鏀寔澶氱粓绔殑寮€婧愰」鐩€傛父鎴忔ā寮忥紙澶ц浆鐩樸€佷節瀹牸銆佽€佽檸鏈猴級鍜屾垜浠殑璁捐鍥炬槸杩欐牱璁捐鐨勶紙鏂囧瓧骞宠浜庡崐寰勶級锛屼絾鏄幇鎴愮殑鍖呬笉鑳界敤锛屾墍浠ヨ涓嬪紑婧愰」鐩苟瀵瑰叾杩涜淇敼浣垮叾閫傚悎鎴戜滑鐨勪笟鍔″満鏅渶姹俿tackblitz鏁堟灉棰勮涓嬮潰鎬荤粨浜嗕竴浜涘疄鐜版€濊矾锛氬垎涓篶anvas鐗堝拰div+css鐗坈anvas鎬濊矾瀹炵幇canvas杞洏缁樺埗锛屽寘鎷瘡涓墖鍖轰笂鏂囧瓧鍜屽浘鐗囩殑缁樺埗锛堝叾瀹炶繖涓槸闇€瑕佹敼鐨勶級鐒跺悗涓嶆柇鐨勬敼鍙樼粯鍥剧殑璧峰瑙掑害锛坈anvas缁樺浘鐨勫垵濮嬭搴︼級璁╄浆鐩樺姩璧锋潵锛屼娇鐢╡asing绠楁硶璁╄浆鐩樿浆鐨勬洿鑷劧锛氳浆鐩樺湪鍒濆闃舵鍔犻€熺紦鎱㈣垶鍙?>鍖€閫?>鍑忛€燂紝鏈€鍚庡仠鍦ㄦ寚瀹氭墖鍖猴紙涓缁撴灉鑲畾鏄痑pi杩斿洖鐨勶紝闇€瑕佸墠绔帶鍒讹紝鏈€鍚庡仠鍦ㄦ寚瀹氭墖鍖猴級鎸囧畾浣嶇疆銆傛寜鐓ucky-canvas涓婄殑璇存硶鏄壊鑸熸眰鍓戙€傦級璇磋娉ㄦ剰鐐癸細canvas缁樺浘闇€瑕佹敞鎰忥紝璧峰瑙掑害浠庝笁鐐瑰紑濮嬶紝鐢讳竴鍦堟槸2*Math.PI锛屼负浜嗚璧峰浣嶇疆钀藉湪绗竴涓墖鍖猴紝闇€瑕侀€嗘椂閽堟棆杞竴瀹氳搴︼紙鏍规嵁鎴戠殑闇€瑕侊紝鏈?涓墖鍖猴紝鍗抽渶瑕佹棆杞?*Math.PI/8*2)锛屽紑鍙戠殑鏃跺€欏缓璁妸寮у害锛堜笉鐭ラ亾杩欓噷鐢ㄥ姬搴﹀涓嶅馃槃锛夎浆鎴愯搴︼紝杩欐牱璁＄畻杩囩▼鏇存柟渚匡紝涔熻兘鍑忓皯璇樊鏃犻檺涓嶅惊鐜皬鏁板紩璧风殑/***杞崲涓鸿绠楄搴?@param{number}degmathangle*@return{number}canvascircleangle*/constgetAngle(deg:number):number=>(Math.PI/180)*degrequestAnimationFrame娌′粈涔堝ソ璇寸殑锛岀幇鍦ㄦ祻瑙堝櫒鍏煎鎬у凡缁忎笉鏄棶棰樹簡Easingalgorithm:Infact锛屽氨鏄牴鎹竴绯诲垪鍙橀噺璁＄畻鍑轰竴涓€硷紙鍔ㄧ敾鍙樺寲閲忥級銆傚叿浣撳彲浠ュ弬鑰冨紶鏂版棴鐨則ween.js鐨勭畝鍗曞疄鐜般€備粠鑰屽緱鍒版墖鍖烘寚鏁癷ndex锛歝onstprizeDeg=-index*(360/8)+initDeg锛涳紙initDeg涓哄垵濮嬫棆杞殑鍒濆瑙掑害锛夐渶姹傚畬鎴愬悗锛屽彂鐜颁笉鐢╟anvas涔熷彲浠ョ敤div瀹炵幇杩欎釜鏁堟灉寰堟柟渚裤€傞櫎浜嗙涓€姝ョ敾杞洏澶栵紝鍏朵粬涓ゆ澶ц嚧鐩稿悓銆備娇鐢╠iv+css浠ｆ浛canvas锛屼富瑕佷娇鐢╰ransform:rotate(x)skew(y)銆傞渶瑕佹敞鎰忕殑涓€鐐规槸鏃嬭浆鍜屾壄鏇蹭箣鍚庯紝div鐨勫瓙鍏冪礌涔熶細鍙戠敓鏃嬭浆鍜屾壄鏇层€傛垜浠ヤ负鍐檛ransform:rotate(-x)skew(-y)灏卞彲浠ヤ簡锛屼絾鏄笉鐭ラ亾transform鍙樻崲鏄湁搴忕殑銆傚啓transform:skew(-y)rotate(-x)寮曠敤div鍚庯紝鏃嬭浆涓嶉渶瑕佷笉鏂噸缁樼敾甯冿紝鍙渶瑕佷笉鏂敼鍙榩arentset鍏冪礌鐨則ransform:rotate()锛屽嵆姣攃anvas浠ｇ爜鍙傝€僪ttps://github绠€鍗曞浜嗐€俢om/hugeorange...鏍稿績浠ｇ爜浣跨敤ts寮€鍙戯紙涓嶄緷璧栨鏋讹級銆傝€冭檻鍒版垜鐨勪唬鐮佹弧瓒崇殑鍦烘櫙姣旇緝灏戯紝娌℃湁鎵撳寘鎴恘pm鍖咃紝鏈夌浉鍚屽満鏅渶姹傜殑鏈嬪弸鍙互鐩存帴copy浠ｇ爜
