鍠滄+鍏虫敞+鏀惰棌杩欑瘒鏂囩珷鐨勪粙缁?鎴戝湪銆妏5.js 鍏夐€熷叆闂ㄣ€嬪浼氫簡浣跨敤CDN鏉ヤ娇鐢╬5.js锛岃繖涓嶇鍚堢幇鍦ㄧ殑寮€鍙戜範鎯€備笉绠℃垜浠敤鐨勬槸Vue杩樻槸React锛屾垜浠棩甯哥殑澶ч儴鍒嗛」鐩兘搴旇浣跨敤鑴氭墜鏋舵潵寮€鍙戙€傛寜鐓с€妏5.js 鍏夐€熷叆闂ㄣ€嬬殑鏂规硶锛屼互妯″潡鏂瑰紡浣跨敤p5.js銆傛病鏈夋剰澶栵紝灏变竴瀹氫細鏈夋剰澶栵紒鍥犳锛屾湰鏂囧皢瀹屾垚銆妏5.js 鍏夐€熷叆闂ㄣ€嬬殑榛樿妯″潡寮€鍙戞ā寮忋€傜幆澧冩惌寤轰负浜嗘柟渚匡紝鎴戜細浣跨敤vite鎼缓涓€涓猲ative椤圭洰銆傚垱寤洪」鐩?1.鍒涘缓椤圭洰npmcreatevite@latest#2.鍛藉悕椤圭洰锛熼」鐩悕绉帮細禄p5-demo#3.閫夋嫨妗嗘灦銆傝繖閲岄€夋嫨Vanilla鍒涘缓鍘熺敓椤圭洰锛熼€夋嫨涓€涓鏋讹細禄-浣跨敤绠ご閿€傝繑鍥炴彁浜?VanillaVueReactPreactLitSvelteOthers#4.閫夋嫨寮€鍙戣瑷€銆傛垜閫夋嫨浜咼S锛屼綘鏄牴鎹嚜宸辩殑闇€姹傞€夋嫨鐨勫悧锛熼€夋嫨涓€涓彉浣擄細禄-浣跨敤绠ご閿€傝繑鍥炴彁浜ゃ€?JavaScriptTypeScript#5.鍒濆鍖栧苟杩愯椤圭洰cdp5-demonpminstallnpmrundevproject灏辫繖鏍峰垱寤轰簡銆傚畨瑁卲5.js鍚庤繘鍏5-demo椤圭洰锛屼娇鐢ㄥ涓嬪懡浠ゅ畨瑁卲5.jsnpminstallp5--save瀹夎瀹屾垚鍚庯紝浣跨敤npmrundev杩愯椤圭洰銆傚垱寤虹敾甯冨湪鍒涘缓鐢诲竷涔嬪墠锛屾偍闇€瑕佸厛瀵煎叆p5.js銆傚鍏ュ悗鍙互灏濊瘯杈撳嚭p5.js鐨勭増鏈€傛墦寮€main.js锛岃緭鍏ヤ互涓嬪唴瀹筰mportp5from'p5'//importp5console.log(p5.VERSION)//杈撳嚭p5.js鐨勫綋鍓嶇増鏈墦寮€娴忚鍣ㄧ殑鎺у埗鍙板彲浠ョ湅鍒皃5.js鐨勫綋鍓嶇増鏈紝鍦ㄦ挵鍐欐湰鏂囨椂锛屼娇鐢ㄧ殑鏄痸1.5.0銆傝繖鏃跺€欙紝濡傛灉浣犳墦绠楀儚銆妏5.js 鍏夐€熷叆闂ㄣ€嬮偅鏍风洿鎺ヤ娇鐢╯etup()鍒涘缓鐢诲竷锛岄偅鏄笉鍙兘鐨勶紝鍥犱负妯″潡妯″紡寮曞叆鐨刾5.js鐨剆etup()鏂规硶骞舵病鏈夌洿鎺ョ粦瀹歸indow銆傛偍鍙兘浼氱寽鍒皃5.setup()灏嗗缁堟湁鏁堬紝瀵瑰悧锛熸煡鐪嬫帶鍒跺彴杈撳嚭涓殑console.log(p5.setup)锛屼細鍙戠幇杈撳嚭鏄痷ndefined銆傚ソ鍚э紝娌℃湁浠讳綍鍊熷彛銆傝鍦ㄦā鍧楁ā寮忎笅浣跨敤p5.js锛屾偍闇€瑕佽繖鏍峰啓锛歩mportp5from'p5'letcount=0consts=(sketch)=>{sketch.setup=function(){sketch.createCanvas(400,400)//鍒涘缓涓€涓敾甯冿紝浼犲叆鐢诲竷澶у皬sketch.background(120)//璁剧疆鐢诲竷鑳屾櫙棰滆壊}sketch.draw=function(){letx=Math.sin(count)*100+200lety=Math.cos(count)*100+200sketch.circle(x,y,50)//鍒涘缓涓€涓渾count+=0.1}}newp5(s)鍦ㄨ繖涓緥瀛愪腑锛屾垜鐢讳簡涓€涓渾锛岃瀹冪粫鐫€鑷繁杞€備互妯″潡妯″紡寮€鍙戯紝鍙互浣跨敤importp5from'p5'瀵煎叆p5.js銆備娇鐢╪ewp5(sketch)鍒涘缓涓€涓猵5绋嬪簭銆俿ketch鏄紶缁檔ewp5()鐨勫弬鏁帮紝鏄竴涓嚱鏁般€傚涓婁緥锛岃鍑芥暟涓彲浠ヤ娇鐢╯etup()鍜宒raw()绛夋柟娉曘€傚皢鐢诲竷缁戝畾鍒版寚瀹氱殑鍏冪礌newp5()鍒涘缓鐨勭敾甯冭鏀剧疆鍦ㄩ〉闈㈢殑鏈熬銆傚湪index.html鏂囦欢涓緭鍏ヤ互涓嬪唴瀹?divid="app">
