鏈枃灏嗕娇鐢ㄥ姩鐢诲伐鍘備粠0-1鎼缓鐢熸垚鍚勭绮掑瓙鍔ㄧ敾锛屽埄鐢ㄥ彲瑙嗗寲缂栬緫鑳藉姏锛岀畝鍗曟搷浣滃嵆鍙疄鐜帮紝涓嬮潰鎴戝甫澶у涓€姝ユ瀹炵幇涓€涓矑瀛怉ction锛屽噯纭殑璇存槸鏍规嵁涓€涓笟鍔″疄鐜颁竴涓嚜瀹氫箟鐨刟ction銆傜湅瀹岃繖绡囨枃绔狅紝浣犲彲浠ユ槑鐧戒互涓嬪嚑鐐癸細濡備綍瀹炵幇鑷畾涔夊姩浣滃浣曚娇鐢ㄥ姩鐢诲伐鍘傚湪瀹炵幇鑷畾涔夊姩浣滀箣鍓嶏紝鍏堢畝鍗曚粙缁嶄竴涓嬫垜浠」鐩殑鑳屾櫙銆備粈涔堟槸杩愬姩宸ュ巶锛熸垜浠洟闃熺敤鍒扮殑鍔ㄧ敾鍦烘櫙姣旇緝澶氾紝鎵€浠ョН绱簡涓€浜涘姩鐢绘晥鏋滐紝鍚屾椂涔熷彲浠ユ洿濂界殑澶嶇敤鍒颁笅娆￠亣鍒扮殑鏃跺€欍€傞偅涔堟垜浠彲浠ユ敮鎸佸灏戜釜鍔ㄦ晥锛屾垨鑰呰鍝簺鍔ㄦ晥鍙互澶嶇敤锛岄兘鍙互鍦ㄥ姩鏁堝伐鍘傜殑鍔ㄦ晥搴撲腑鎵惧埌銆傝繖鏃跺€欐湁鍚屽浼氳锛岃繖浜涗笢瑗夸笉绗﹀悎闇€姹傦紝涓嶉€氱敤锛屾墍浠ユ帴涓嬫潵瑕佽涓€涓嚜瀹氫箟鍔ㄤ綔锛屽氨鏄疄鐜颁竴涓姩鐢诲簱涓病鏈夌殑鍔ㄧ敾锛岀劧鍚庢彁浜ゅ埌鍔ㄧ敾搴擄紝鍚庨潰鏈夌被浼肩殑鍔ㄦ晥锛屽叾浠栦汉鍙互澶嶇敤銆傜矑瀛愬姩鐢昏繖閲岋紝鎴戝氨甯﹀ぇ瀹跺疄鐜颁竴涓矑瀛愬姩鐢汇€傞鍏堣В閲婁竴涓嬩粈涔堟槸绮掑瓙鍔ㄧ敾锛燂紵锛燂紵绮掑瓙鍔ㄧ敾鏄敱涓€瀹氳寖鍥村唴澶ч噺闅忔満浜х敓鐨勭矑瀛愮粍鎴愮殑鍔ㄧ敾锛屽箍娉涘簲鐢ㄤ簬妯℃嫙澶╂皵绯荤粺銆佺儫闆惧拰鐏厜鏁堟灉绛夈€傚湪鐢靛晢骞冲彴鐨勫井娓告垙鍖栧満鏅腑锛岀矑瀛愬姩鐢讳富瑕佺敤浜庤兘閲忛噰闆嗗拰閲戝竵閲囬泦鏃跺憟鐜扮壒鏁堛€傝繖閲屾垜鍑嗗浜嗕袱涓緥瀛愶紝渚涘ぇ瀹跺湪鎴戜滑鐨勪笟鍔″満鏅腑浣跨敤锛氫笂闈㈢殑绮掑瓙杩樻槸涓嶅鐢紝鍦ㄧ矑瀛愪笂璐翠笂鐩稿簲鐨勮创鍥撅紝鐒跺悗鐢ㄦ煇绉嶅姩鐢绘潵灞曠ず锛岃揪鍒伴潪甯哥偒閰风殑瑙嗚鏁堟灉鐘舵€侊紝鏈夝煉板緢澶氱殑鎰熻锛佸垱寤轰竴涓矑瀛愮被鍏跺疄涓嶇浠€涔堟牱鐨勭矑瀛愭晥鏋滐紝鍏夌湅鏁堟灉鏄笉鐭ラ亾鎬庝箞鍘诲垎鏋愯繖涓姩鐢荤殑銆傚叾瀹炲垎鏋愬姩鐢伙紝鎴戜滑鍙互鍏堢湅涓€涓矑瀛愭槸濡備綍鍙樺寲鐨勩€傛垜浠湅涓嬪浘锛氱矑瀛怉鍦ㄧ敾甯冧笂锛屼粠A鐨勪綅缃粡杩囦竴娈靛姩鐢讳箣鍚庯紝鍙兘鏄洿绾垮彉鍖栵紝涔熷彲鑳芥槸鎶涚墿绾垮彉鍖栵紝涔熷彲鑳芥槸鎴戜滑鐨勪笁闃惰礉濉炲皵鏇茬嚎鍙樺寲銆備絾鏄墍鏈夌殑鍙樺寲閮芥槸涓€鏍风殑锛屾湰璐ㄤ笂x鍜寉閮藉彂鐢熶簡鍙樺寲锛屽彧鏄痻浠巟0绉诲姩鍒皒1锛寉浠巠0绉诲姩鍒皔1锛屾墍浠ュ疄闄呬笂瀵瑰簲褰撳墠绮掑瓙锛屾湁涓や釜vx鍜寁y銆傚睘鎬с€傝繖鏍风殑绮掑瓙鏈€鍩烘湰鐨勫睘鎬у叾瀹炲浜庡熀鏈殑鍔ㄧ敾鏉ヨ宸茬粡瓒冲浜嗐€傛垜浠紪鍐欏涓嬩唬鐮侊細classParticle{constructor(x=0,y=0){this.x=xthis.y=xthis.radius=1this.vx=0this.vy=0this.color='hsla(197,100%,50%,80%)'}draw(ctx){ctx.save()ctx.fillStyle=this.colorctx.beginPath();ctx.arc(this.x,this.y,this.radius,0,Math.PI*2);ctx.濉厖();ctx.closePath();ctx.restore()}move(){this.x+=this.vxthis.y+=this.vy}}杩欐牱锛屾垜浠疄闄呬笂灏卞彲浠ユ瀯閫犲嚭褰撳墠绮掑瓙鎵€闇€瑕佺殑鐗瑰緛銆備絾鏄繖鏃跺€欐垜浠繕鏄渶瑕佷竴涓矑瀛愮鐞嗗櫒鏉ョ鐞嗘墍鏈夌殑绮掑瓙锛屼富瑕佺敤鏉ユ帶鍒剁矑瀛愮殑鏁伴噺鐢熸垚澶氱绫诲瀷鐨勭矑瀛愯繘琛屾覆鏌撴搷浣滄帶鍒剁矑瀛愮殑x鏂瑰悜閫熷害鍜寉鏂瑰悜閫熷害鍦ㄥ摢涓尯闂达紝鍏跺疄杩欎簺灏辨槸鎵€璋撶殑缁熶竴绠＄悊锛屼唬鐮佹槸涓嶄細鏄剧ず鐨勩€備笂闈㈡墍璋撶殑鎿嶄綔鍏跺疄灏辨槸鏋勬垚绮掑瓙鍔ㄤ綔鐨勪竴浜涚粍鎬佸姩浣溿€傛垜浠墦寮€杩欎釜鐩綍锛岄噷闈㈠氨鏄垜浠姩鐢诲伐鍘傜殑鎵€鏈夊姩浣溿€備緥濡傦紝鎴戝疄闄呬笂鏄湪杩欓噷鍒涘缓涓€涓柊鐨刾article-action.ts銆傛渶鍩烘湰鐨勭粨鏋勬槸濡備綍瀹炵幇鐨勩€傚氨鏄繖閲岀殑actionConfig锛屽叾瀹炲搴旂殑鏄姩鐢诲伐鍘傚彲瑙嗗寲瑙嗗浘鐨勫睘鎬с€傛垜浠細鏈変竴浜涢粯璁ょ殑灞炴€э紝涔熷氨鏄瘡涓姩浣滈兘鏈変竴浜涘浐瀹氱殑灞炴€э紝浣嗘槸涔熶細鏈変竴浜涚壒娈婃儏鍐点€傞偅涔堜綘鍦ㄥ鍑轰竴涓狝ction鍑芥暟锛屾垜浠湅鐪嬭繖閲屾槸鎬庝箞鍐欑殑锛屽叾瀹炴槸鍥哄畾鐨勫啓娉曘€備絾鎴戣繕鏄璇存竻妤氾細棣栧厛锛岃鍔ㄥ繀椤讳綔鐢ㄤ簬瑙傜偣銆傚湪鍔ㄧ敾宸ュ巶閲岄潰锛屽叾瀹炲氨鏄搴旂殑View锛岀劧鍚庢槸涓€浜涚紦鍔ㄥ姩鐢汇€傛垜浠湅涓€涓嬩唬鐮乶ullreturn(time:number)=>{constprogress=useProgress(time,timing,duration,config)useOnce(()=>{ctx=view.makeCanvas().getContext('2d')})if(ctx){view.addLayer(ctx.canvas)}}}2涓嫭绔嬬殑hookuseOnce鍜寀seProgress杩欓噷涓嶅緱涓嶆彁涓€涓嬨€備负浠€涔堣浣跨敤閽╁瓙锛熶富瑕佺洰鐨勬槸鏂逛究璋冪敤鏃禷ction鍜宖rame鐨勮仈鍔紙杩欓噷鍊熺敤浜哛eacthooks鐨勬€濇兂锛夋潵璁剧疆鎴栬幏鍙栧綋鍓峟rame鐨勬椂闀裤€傛垜绠€鍗曠粰澶у浠嬬粛鍑犱釜useCache缂撳瓨鍙橀噺锛屼繚鎸乤ction鐨勬墽琛岃繃绋媢seState淇濆瓨鍜屼慨鏀筧ction鐨勭姸鎬乽seOnce鍦‵rame鐨勬暣涓敓鍛藉懆鏈熷唴鍙細鎵ц涓€娆°€倁seFinish鎵цuseContext鑾峰彇Frame琚Щ闄ゆ椂鐨勫綋鍓嶉銆倁seProgress鑾峰彇褰撳墠杩涘害銆倁seOnce鍏跺疄鏈夌偣绫讳技浜庡崟渚嬨€傛垜浠彧鍒涘缓涓€娆★紝鍥犱负涓婇潰鐨勫嚱鏁版瘡甯ч兘浼氳皟鐢ㄤ竴娆★紝鎵€浠ヤ负浜嗛伩鍏嶉噸澶嶅垱寤虹殑闂锛岃繖閲岀畝鍗曡涓€涓嬨€傝繖琛屼唬鐮乧tx=view.makeCanvas().getContext('2d')鍏跺疄view鍙槸鎴戜滑鎶借薄鍑烘潵鐨勪笢瑗裤€備笉绠′綘鍋氫粈涔堬紝灏辨槸娓叉煋灞忓箷锛岄兘鍙栧喅浜庣敾甯冦€傛墍浠ュ湪瑙嗗浘涓婁娇鐢ㄤ簡makeCanvas瀹炰緥鐨勬柟娉曪紝鍚庣画鐨勬墍鏈夊姩浣滈兘娓叉煋鍦ㄨ繖涓敾甯冧笂锛屽舰鎴愬姩鐢汇€?d鍏跺疄鏄渶绠€鍗曟渶甯哥敤鐨勬柟娉曪紝浣嗘槸canvas涓嶄粎鏈?d杩樻湁webgl鍜寃ebgl2銆傚叾瀹炲氨鏄鎶婃垜浠繖涓笢瑗垮悗闈㈢殑3D鑳藉姏鎵╁睍涓€涓嬪氨鍙互浜嗐€傚叾瀹炴垜涔熷仛浜嗕竴浜涘皾璇曪紝浣嗘槸鍥犱负涓氬姟鍦烘櫙涓嶅锛屾墍浠ヤ篃鑷繁灞曠ず涓€涓嬨€傚湪杩欓噷鎴戝彲浠ュ拰澶у鍒嗕韩涓€涓嬫垜鐢ㄦ垜浠姩鐢诲伐鍘?D鍒朵綔鐨勫姩鐢汇€傚ソ浜嗭紝瑷€褰掓浼狅紝鎴戜滑缁х画鍐欐垜浠殑绮掑瓙鍔ㄤ綔锛屾垜浠潵鐪嬭繖寮犲浘锛氫竴涓矑瀛愬湪鍥哄畾鐨勮閲庝腑杩愬姩锛屽鏋滅Щ鍔ㄤ簡杈圭晫锛屾鏃剁殑閫熷害搴旇鎬庝箞鍙樺寲锛屽叾瀹烇紝灏辨槸鎵€璋撶殑纰版挒妫€娴嬫垜杩欓噷鍏跺疄灏辨槸鏈変竴涓脊鎬х郴鏁般€傚綋绮掑瓙绉诲姩鍒拌竟鐣屾椂锛屽嵆绮掑瓙鐨剉x鏂瑰悜鍜寁y鏂瑰悜鍙樹负鐩稿弽鏂瑰悜銆傚鏋滀笉寮€鍚鎾炴娴嬶紝鍏跺疄灏辨槸鏀瑰彉绮掑瓙鐨勪綅缃紝灏嗙矑瀛愮殑x銆亂鍊艰缃埌瀵瑰簲鐨凩ocation銆傜湅涓嬪浘锛屾垜鍙湁涓€涓柟鍚戙€備唬鐮佸涓嬶細//纰版挒妫€娴媍heckWall(isWallCollisionTest=true,bounce=1,W=1000,H=1000){if(isWallCollisionTest){if(this.x+this.radius>W){this.x=W-杩欎釜.radius;this.vx*=-寮硅烦锛泒elseif(this.x-this.radius<0){this.x=this.radius;this.vx*=-寮硅烦锛泒if(this.y+this.radius>H){this.y=H-this.radius;this.vy*=-寮硅烦锛泒elseif(this.y-this.radius<0){this.y=this.radius;this.vy*=-寮硅烦锛泒}else{if(this.x-this.radius>W){this.x=0;}elseif(this.x+this.radius<0){this.x=W;}if(this.y-this.radius>H){this.y=0;}elseif(this.y+this.radi鎴戜滑<0){this.y=H;}}}鎴戜滑璁剧疆100涓矑瀛愶紝鐪嬬湅纰版挒妫€娴嬬殑鏁堟灉锛氳繖閲岀殑鍗￠】鏄崱椤匡紝鎴戜滑鍏朵粬鐨刢anvas绮掑瓙鍦ㄥ綍鍒惰棰戠殑鏃跺€欎笉澶熺敤锛屾椂闂翠笉浼氬崱椤裤€傛枃鏈矑瀛愮劧鍚庢垜浠墿灞曞綋鍓嶇矑瀛愭潵鎵╁睍鏂囨湰绮掑瓙銆傚叾瀹炶繖閲岀畝鍗曚粙缁嶄竴涓嬨€傜敾甯冪殑鏁翠釜鐢诲竷鍏跺疄灏辨槸鍍忕礌銆傛垜浠彲浠ヤ綋浼氬埌鍘熺悊鍏跺疄寰堢畝鍗曘€侰anvas涓湁涓€涓猤etImageData鏂规硶锛屽彲浠ヨ幏鍙栦竴涓煩褰㈣寖鍥村唴鐨勬墍鏈夊儚绱犳暟鎹€傚洜姝わ紝璁╂垜浠皾璇曡幏鍙栨枃鏈殑褰㈢姸銆俤ata灞炴€ц繑鍥炰竴涓猆int8ClampedArray锛屽彲鐢ㄤ綔鏌ョ湅鐨勫垵濮嬪儚绱犳暟鎹€傛瘡涓儚绱犵敱4涓?bytes鍊艰〃绀猴紙鎸夌孩鑹层€佺豢鑹层€佽摑鑹插拰閫忔槑鍊肩殑椤哄簭锛涜繖鏄€淩GBA鈥濇牸寮忥級銆傛瘡涓鑹插€奸儴鍒嗙敱0鍒?55琛ㄧず銆傛瘡涓儴鍒嗗湪鏁扮粍涓垎閰嶄竴涓繛缁殑绱㈠紩锛屽乏涓婅鍍忕礌鐨勭孩鑹查儴鍒嗗湪鏁扮粍鐨勭储寮?澶勩€傚儚绱犱粠宸﹀埌鍙冲鐞嗭紝鐒跺悗鍚戜笅閬嶅巻鏁翠釜鏁扮粍銆傛垜杩欓噷浣跨敤鐨勭敾甯冨ぇ灏忔槸1000*1000锛岀敤鍧愭爣绯昏〃绀轰负x杞?000锛寉杞?000鍏跺疄灏辨槸RGBA(255,255,255,0)杩欏洓涓被浼肩殑鏁颁唬琛ㄤ竴涓儚绱狅紝鎵€浠?0001000鐢诲竷鐢盪int8ClampedArray鏁扮粍琛ㄧず銆備竴鍏辨湁澶氬皯涓厓绱狅紵瀹冩槸10001000*4涓厓绱犮€傜涓€姝ユ槸浣跨敤measureText鐨勬柟娉曟潵璁＄畻鏂囨湰鐨勯€傚綋澶у皬鍜屼綅缃€俢onstcanvas=document.createElement('canvas')constctx=canvas.getContext('2d');canvas.setAttribute('瀹藉害',1000);canvas.setAttribute('楂樺害',1000);ctx.clearRect(0,0,1000,1000)ctx.font='绮椾綋10pArial'constmeasure=ctx.measureText(this.text)constsize=0.15constfSize=Math.min(1000*size*10/7,1000*澶у皬*10/measure.width);//10鍍忕礌瀛椾綋琛岄珮lineHeight=7magicctx.font=`${fSize}pxArial`;璁﹍eft=(1000-measure.width)/2-measure.width/2;constbottom=(1000+fSize/10*7)/2;ctx.fillText(this.text,left,bottom)constimageData=ctx.getImageData(0,0,1000,1000).datafor(letx=0;x<1000;x+=4){for(lety=0;y<1000;y+=4){constfontIndex=(x+y*1000)*4+3;if(imageData[fontIndex]>0){this.points.push({x,y})}}}鍏跺疄杩欓噷鎴戜滑鑾峰彇鐨勬槸鍍忕礌锛岃幏鍙栫殑鏄敱鏂囧瓧缁勬垚鐨勫儚绱犮€傜劧鍚庢垜浠氨鍙互娓叉煋浜嗭紝杩欓噷鎴戜滑鐪嬩笅闈㈣繖涓棰戯細涓轰粈涔堣鐢ㄥ姩鐢诲伐鍘傦紵锛熶綘涓嶉渶瑕侀噸鍐欒繖浜涳紝浣犲彧闇€瑕佷娇鐢ㄦ垜浠殑鍔ㄧ敾宸ュ巶鍜岀畝鍗曠殑閰嶇疆灏卞彲浠ョ敓鎴愪笂闈㈢殑绮掑瓙鍔ㄧ敾銆傚湪椤甸潰涓婇厤缃綘鍙互鍦ㄨ繖涓〉闈笂閰嶇疆锛岄厤缃綋鍓峚ction瀵瑰簲鐨勫睘鎬э紝鐒跺悗杩欎釜涓滆タ灏辨槸鍜屾垜浠殑dsl鐩稿叧鐨勶紝鎵€浠ヤ竴瀹氳娉ㄦ剰杩欎釜灞炴€х殑鍛藉悕銆傛垜浼氬湪鍚庨潰鐨勬枃绔犱腑涓€姝ユ鍒嗘瀽銆傚垎鏋愬姩鐢讳笂鍥句腑鐨勬枃瀛楃矑瀛愬姩鐢讳粠鍔ㄧ敾鏉ョ湅鏄?涓叧閿抚锛岀劧鍚庝竴姝ュ垏鎹€傞偅鍏跺疄瀵瑰簲鐨勫氨鏄垜浠姩鐢诲伐鍘傜殑鏃堕棿绾匡紝闀胯繖鏍凤細鎴戠涓€涓叧閿抚瀵瑰簲鐨勫姩鐢诲弬鏁帮紝浠ュ強鏃堕暱锛涚劧鍚庣涓€甯х粨鏉燂紝鎾斁绗簩甯с€傞偅涔堣繖鏍峰搴旂殑view鍏跺疄灏辨槸4涓獀iew锛屽洜涓簐iew鍜宎ction鏄竴瀵逛竴瀵瑰簲鐨勶紝鎴栬€呮槸涓€瀵瑰鐨勫叧绯汇€傞偅灏辨槸鏍硅妭鐐广€傛垜浠殑root涓嬫湁4涓獀iew锛屽鍥撅細鐒跺悗鎴戜滑閫夋嫨浠绘剰涓€涓獀iew锛岀偣鍑?鍙烽€夋嫨绮掑瓙寮规濡備笅锛氶€変腑绮掑瓙锛岀劧鍚庡簳閮ㄤ細鍑虹幇杩涘害鏉★紝鐐瑰嚮缂栬緫鍔ㄧ敾灞炴€с€傛垜浠缃枃鏈殑鍙傛暟锛屾枃鏈矑瀛愮殑澶у皬銆傚鍥撅細鍏跺疄涓嬮潰鐨勬搷浣滈兘鏄竴鏍风殑銆傚敮涓€鐨勫尯鍒槸鏄剧ず鐨勬枃鏈笉鍚屻€傚姩浣滅殑鎵ц涔熸湁寤惰繜銆傜浜屼釜寤惰繜1000绉掞紝绗笁涓欢杩?000绉掞紝渚濇绫绘帹銆傚綋浣犵殑杩涘害鏉℃槸杩欎釜鏍峰瓙鐨勬椂鍊欙紝浣犲氨浼氫竴鐩簡鐒剁劧鍚庣偣鍑绘挱鏀炬寜閽瑙堝姩鐢伙細HOWTOUSE杩欏叾瀹炲緢绠€鍗曘€傜偣鍑诲乏涓嬭鐨勪笅杞芥寜閽紝鐢熸垚ts鏂囦欢銆傝繖涓猼s鏂囦欢鍖呮嫭褰撳墠瑙嗗浘鍜岃祫婧愯鍥剧殑鍚勭淇℃伅锛屼絾鏄綘涓嶉渶瑕佽€冭檻瀹冦€傜洿鎺ュ畨瑁呮垜浠殑sdkyarninstall@wind/core鐒跺悗璋冪敤import{play}from'@wind/core'play(animation(),{container:canvasnode})灏卞彲浠ヤ娇鐢ㄤ簡锛佹渶鍚庯紝澶у鏈変粈涔堥棶棰樺彲浠ヨ瘎璁哄尯浜ゆ祦鍝︼紒鏂?Fly鍏虫敞寰楃墿绉戞妧锛屽仛鏈€鏃跺皻鐨勭鎶€浜猴紒
