教你实现一个简单的Canvas钟表效果
鎽樿锛氫粖澶╂暀澶у鍐欎竴涓猚anvas閽熻〃澹炽€傛晥鏋滃彲鑳界湅璧锋潵鐩稿绠€鍗曪紝娌℃湁閭ｄ簺鑺遍噷鑳″摠鐨勪笢瑗裤€傛湰鏂囧垎浜嚜鍗庝负浜戠ぞ鍖恒€婂浣曞疄鐜颁竴涓湸瀹炴棤鍗庣殑Canvas鏃堕挓鏁堟灉銆嬶紝浣滆€咃細鍖楁瀬鍏変箣澶溿€?1銆佸厛鐪嬫晥鏋滐細浠婂ぉ鍐欎竴涓竼甯冮挓琛ㄥ３銆傝繖涓晥鏋滅湅浼兼瘮杈冪畝鍗曪紝娌℃湁閭ｄ簺鑺遍噷鑳″摠鐨勪笢瑗匡紝浣嗘槸娑夊強鍒板緢澶歝anvas鐭ヨ瘑鐐癸紝瀵逛簬鍒濆鑰呮潵璇存槸蹇呭鐨勩€備笅闈㈠甫澶у蹇€熷疄鐜颁竴涓媬浜屻€佸疄鐜版楠わ紙婧愮爜鍦ㄦ渶鍚庯級锛?銆佽缃熀鏈殑鏍囩鍜屾牱寮忥細
*{杈硅窛锛?;濉厖锛?锛涙澶у皬锛氳竟妗嗘锛泒韬綋{楂樺害锛?00vh锛涙樉绀猴細寮规€э紱璇佹槑鍐呭锛氬眳涓紱瀵归綈椤圭洰锛氬眳涓紱鑳屾櫙鑹诧細rgb(204,204,204)锛泒.clock{瀹藉害锛?00px锛涢珮搴︼細300px锛涜儗鏅壊锛歳gb(15,15,15);杈圭晫鍗婂緞锛?0px锛泒2.鍚姩js浠ｇ爜瀹炵幇锛屼笅闈负浜嗕究浜庣悊瑙ｏ紝鎵€浠ヤ竴涓嚱鏁板皝瑁呬簡涓€涓嚱鏁帮細varcanvas=document.getElementById("canvas");varctx=canvas.getContext("2d");3.鍏堢敾鍑烘椂閽熺殑鏁翠綋鐧借壊搴曠洏锛氬悓鏃朵负浜嗗悗鏈熷皢鏃嬭浆鐐硅缃湪.clock鐨勪腑蹇冿紝translate鍋忕Щ浜嗕竴鍗婄殑璺濈銆傚嚱鏁癲rawPanel(){ctx.translate(150,150);//寮€濮嬬粯鍒禼tx.beginPath();//鐢讳竴涓渾ctx.arc(0,0,130,0,2*Math.PI);CTX銆俧illStyle="鐧借壊";ctx.濉厖();}4銆傜敾鍑烘椂閽熺殑12浣嶆暟瀛楋細鍙互鐪嬪嚭瀹冨湪涓€涓渾涓婄殑x鍧愭爣鏄細Rcos锛堝畠鐨勮搴︼級锛屽畠鐨剏鍧愭爣鏄細Rsin锛堝畠鐨勮搴︼級銆傚悓鏃讹紝鍥犱负Math.cos()鍜孧ath.sin()璁＄畻鐨勬槸寮у害锛屾墍浠ラ渶瑕佽繘琛岃浆鎹€傚叕寮忥細radian=angle*蟺/180functionhourNum(){//瀛樺偍12涓暟vararr=[1,2,3,4,5,6,7,8,9,10,11,12];CTX銆傚紑濮嬭矾寰勶紙锛夛紱//鏁板瓧鍩烘湰鏍峰紡ctx.font="30pxfangsong";ctx.textAlign="灞呬腑";ctx.textBaseline="涓棿";ctx.fillStyle="榛戣壊";for(vari=0;i
{ctx.clearRect(0,0,canvas.width,canvas.height);update();},1000);3.鎬荤粨锛氫互涓婂氨鏄叏閮ㄥ唴瀹癸紝瀹炵幇璧锋潵骞朵笉闅撅紝鍚堢悊鍒╃敤canvas鎻愪緵鐨勪竴浜涙柟娉曞嵆鍙紝瀵逛簬缁冧範寰堟湁甯姪銆傛簮鐮佺洿鎺ヤ粠鎴戠殑gitee浠撳簱涓嬭浇鎴栬€呭鍒惰繃鏉ヰ煈夛細https://gitee.com/aurora-in-w...鐐瑰嚮鍏虫敞锛岀涓€鏃堕棿浜嗚В鍗庝负浜戠殑鏂伴矞鎶€鏈瘇
