一棵树——矢量图

鍩轰簬鍙鍖栫殑鍥惧舰鍩虹浣滆€咃細鑲栧缓鍗庡彲瑙嗗寲灏辨槸鍓嶇鍙鍖朑raph灏辨槸璁＄畻鏈哄浘褰㈠Vector灏辨槸閭ｄ釜鍚戦噺锛岄珮涓杩囷紝浣犺璇嗙殑鏍戝氨鏄笐鏍戠粨鏋滄槸鍏堟潵鐪嬬湅鏈枃鐨勬渶缁堢粨鏋溿€傛槸涓嶆槸寰堜笐锛佽兘涓嶈兘鍦ㄧ敾灞曚笂鍗栦釜濂戒环閽憋紵杩囩▼灏辩粨鏉熶簡锛岃瘽涓嶅璇达紝鏉ョ湅鐪嬭繖妫典笐鏍戞槸鎬庝箞璇炵敓鐨勩€傚潗鏍囩郴鍧愭爣绯伙紝鍗冲钩闈㈢洿瑙掑潗鏍囩郴锛屾槸鍑犱綍鍥惧舰鐨勫熀纭€锛屽叾娆℃槸鐐广€佺嚎銆侀潰绛夊厓绱犮€傛瘡涓汉閮界啛鎮夊潗鏍囩郴銆傜涓€娆℃帴瑙﹀潗鏍囩郴搴旇鏄湪鍒濅腑鐨勬椂鍊欍€備笉鐭ラ亾澶у瀵归偅涓椂鍊欑殑鍧愭爣绯昏繕鏈夊嵃璞″悧銆傚師鐐瑰湪涓棿锛屾í杞翠负x杞达紝绾佃酱涓簓杞达紝鍒嗕负鍥涗釜璞￠檺銆備絾鏄紝瀵逛簬htmlcanvas锛岄粯璁ゅ師鐐瑰湪宸︿笂瑙掞紝x杞翠笌骞抽潰鐩磋鍧愭爣绯讳竴鑷达紝y杞村悜涓嬶紒锛佺浉淇¤繖绉嶅潗鏍囪酱鍦ㄦ棩甯稿伐浣滀腑浣跨敤canvas缁樺浘鐨勬椂鍊欙紝缁欏墠绔汉閫犳垚浜嗗緢澶х殑鍥版壈銆傝绠楄捣鏉ュ緢璐瑰姏锛岃€屼笖瀹规槗鍑洪敊銆傞偅涔堝浣曞皢鐢诲竷鍧愭爣绯诲彉涓哄钩闈㈢洿瑙掑潗鏍囩郴鍛紵Maaaaaaaaagic!constcanvas=document.querySelector('canvas')constctx=canvas.getContext('2d')//杩欓噷鎴戜滑灏嗗師鐐瑰畾浣嶅湪鐢诲竷鐨勫乏涓嬭ctx.translate(0,canvas.height)//鍏抽敭姝ラ锛氱炕杞敾甯冪殑Y杞存柟鍚慶tx.scale(1,-1)涓よ浠ｇ爜瀹屾垚鍧愭爣绯荤殑缈昏浆銆傝鎴戜滑鐢ㄤ竴涓煂版潵楠岃瘉杩欎釜鍋囪銆傛垜浠鍦ㄥ搴︿负512*楂樺害涓?56鐨凜anvas鐢诲竷涓婂疄鐜板涓嬭瑙夋晥鏋滐紝鍏朵腑灞辩殑楂樺害涓?00锛屽簳涓?00锛屼袱搴у北鐨勪腑蹇冨埌涓嚎鐨勮窛绂讳负80锛屽お闃充腑蹇冪殑楂樺害涓?50銆傝繖閲屾垜浠娇鐢╮ough.js娣诲姞涔愯叮constcanvas=document銆俼uerySelector('canvas')constrc=rough.canvas(canvas)rc.ctx.translate(0,canvas.height)rc.ctx.scale(1,-1)constcSun=[canvas.width/2,106]constdiameter=100//鐩村緞consthill1Points={start:[76,0],//璧风偣top:[176,100],//椤剁偣end:[276,0]//缁堢偣}consthill2Points={start:[236,0],//璧风偣top:[336,100],//椤剁偣end:[436,0]//缁堢偣}consthill1Options={roughness:0.8,strokeWidth:2,fill:'pink'}consthill2Options={roughness:0.8,stokeWidth:2,fill:'chocolate'}functioncreateHillPath(point){const{寮€濮嬶紝椤堕儴锛岀粨鏉焳=鐐硅繑鍥瀈M${start[0]}${start[1]}L${top[0]}${top[1]}L${end[0]}${end[1]}`}functionpaint(){rc.path(createHillPath(hill1Points),hill1Options)rc.path(createHillPath(hill2Points),hill2Options)rc.circle(cSun[0],cSun[1],鐩村緞meter,{stroke:'red',strokeWidth:4,fill:'rgba(255,255,0,0.4)',fillStyle:'solid'})}paint()杩欓噷鎴戜滑缈昏浆浜嗗潗鏍囩郴锛屽畾涔変簡mountain1,mountain2锛屽お闃冲悇鐐圭殑鍧愭爣锛屽畬鍏ㄥ熀浜庣瑳鍗″皵鍧愭爣绯荤殑鍧愭爣銆傚悜閲忥紙Vector锛夌殑涓€鑸畾涔夋槸鍏锋湁澶у皬鍜屾柟鍚戠殑閲忋€傛垜浠繖閲岃璁虹殑鍚戦噺鏄竴涓嚑浣曞悜閲忥紝鐢ㄥ钩闈㈢瑳鍗″皵鍧愭爣绯讳腑鐨勪竴缁勫潗鏍囪〃绀恒€備緥濡?1,1)锛屾剰鎬濇槸锛岄《鐐瑰潗鏍囨槸涓€鏉涓?锛寉涓?鐨勬湁鍚戠嚎鈥嬧€嬫锛屽悜閲忕殑鏂瑰悜涓轰粠鍘熺偣(0,0)鍒伴《鐐圭殑鏂瑰悜(1,1).鎹㈠彞璇濊锛屽鏋滅煡閬撳悜閲忕殑椤剁偣锛屽氨鐭ラ亾鍚戦噺鐨勫ぇ灏忓拰鏂瑰悜鍚戦噺鐨勬ā銆傚悜閲忕殑澶у皬涔熺О涓哄悜閲忕殑妯℃暟锛屾槸鍚戦噺鍧愭爣鐨勫钩鏂瑰拰鐨勭畻鏈钩鏂规牴銆?.5).鐭㈤噺鐨勬柟鍚戜竴鏂归潰锛岀煝閲忕殑鏂瑰悜鍙互鐢ㄧ煝閲忕殑椤剁偣琛ㄧず銆傚彟涓€鏂归潰锛屽悜閲忎篃鍙互鐢ㄥ悜閲忎笌x杞翠箣闂寸殑澶硅鏉ヨ〃绀恒€傚彲浠ヤ娇鐢╦avascriptMath鐨勫唴缃柟娉曡幏鍙栵紝璁＄畻鏂规硶涓猴細//鏈枃鍚庨潰浠嬬粛鐨勬瀯閫犲嚱鏁般€傦細濡傚浘锛氬悜閲弙1(x1,y1)鍜屽悜閲弙2(x2,y2)鐩稿姞寰楀埌鐨勬柊鍚戦噺鏄袱涓悜閲忓搴斿潗鏍囩殑鍜岋紝鐢ㄥ叕寮忚〃绀哄氨鏄痸1(x1,y1)+v2(x2,y2)=v3(x1+x2,y1+y2)鍙嶄箣灏辨槸鍑忔硶v3(x1+x2,y1+y2)-v2(x2,y2)=v1(x1,y1)涔樻硶鍜岄櫎娉曞悜閲忎箻娉曟湁鍙夌Н鍜岀偣涔樻硶鐐逛箻绀烘剰鍥撅細鐗╃悊鎰忎箟鏄紝鏂瑰悜鏄痸a鐨勬柟鍚戯紝澶у皬鏄痸a.length鐨勫姏锛屾媺鍔╲b.length璺濈鍋氱殑鍔焩b鐨勬柟鍚憊avb=va.lengthvb.length*cos(rad)鍙夌Н绀烘剰鍥撅細vavb=va.lengthva.length*sin(rad)涔熷彲浠ョ悊瑙ｄ负闀垮害涓簐a鐨勭嚎娈?length娌跨潃vb鐨勬柟鍚戠Щ鍔ㄥ埌vb鐨勯《鐐规壂杩囩殑鍖哄煙锛屽惁鍒欏氨鏄櫎娉曚箻闄ゆ硶銆傝繖浠呯敤浜庢蹇电洰鐨勩€傚崟浣嶅悜閲忕畝浠嬮暱搴︿负1鐨勫悜閲忕О涓哄崟浣嶅悜閲忋€傛弧瓒宠繖涓潯浠剁殑鍚戦噺鏁颁笉鑳滄暟銆傚皢涓€涓潪闆跺悜閲忛櫎浠ュ畠鐨勬ā灏辨槸杩欎釜鍚戦噺鐨勫崟浣嶅悜閲忋€傛垜浠皢涓巟杞村す瑙掍负0:[1,0]鐨勫悜閲忎綔涓哄崟浣嶅悜閲弙ector鐨勬棆杞紝濡備綍璁＄畻涓€涓悜閲忔棆杞竴瀹氳搴ad鍚庣殑鍚戦噺銆傝繖閲屾湁涓€涓瘮杈冨鏉傜殑鎺ㄥ杩囩▼锛屾墍浠ョ粨璁哄彲浠ョ洿鎺ヨ儗涓嬫潵銆傚叿浣撲唬鐮佽涓嬮潰鐨勬瀯閫犲嚱鏁般€?/鐢ㄩ暱搴︿负2鐨勬暟缁勮〃绀轰竴涓悜閲忥紝涓嬫爣0琛ㄧずx锛屼笅鏍?琛ㄧずyclassVector2DextendsArray{constructor(x=1,y=0){super(x,y)}getx(){returnthis[0]}gety(){returnthis[1]}setx(v){this[0]=v}sety(v){this[1]=v}add(v){this.x=this.x+v.xthis.y=this.y+v.yreturnthis}length(){returnMath.hypot(this.x,this.y)}rotate(rad){constc=Math.cos(rad)consts=Math.sin(rad)const[x,y]=thisthis.x=x*c+y*-sthis.y=x*s+y*creturnthis}}鍒扮洰鍓嶄负姝紝鏂囩珷寮€澶寸敾鍥剧殑鍩烘湰瑕佺礌宸茬粡鍑嗗濂戒簡銆傛帴涓嬫潵锛岃鎴戜滑涓€璧疯璇佷笘鐣屽悕鐢荤殑璇炵敓銆傚噯澶囦竴寮?12*512鐨勭敾甯冪敤浜庢墜缁?html>......缈昏浆鐢诲竷鍧愭爣绯籧onstcanvas=document.querySelector('canvas')constctx=canvas.getContext('2d')ctx.translate(0,canvas.height)ctx.scale(1銆?1)瀹氫箟缁樺埗鍒嗘敮鐨勬柟娉?***1.ctxcanvasctx涓婁笅鏂囧璞?2.璧峰鍚戦噺*3.闀垮害鍚戦噺闀垮害锛堝垎鏀暱搴︼級*4.绮楃粏绾挎瀹藉害*5.鍗曚綅鍚戦噺dir鏃嬭浆瑙掑害*6.鍋忕疆闅忔満鍥犲瓙*/constcanvas=document.querySelector('canvas')constctx=canvas.getContext('2d')ctx.translate(0,canvas.height)ctx.scale(1,-1)ctx銆俵ineCap='round'console.log(canvas.width)constv0=newVector2D(canvas.width/2,0)functiondrawBranch(ctx,v0,length,thickness,rad,bias){constv=newVector2D()}.rotate(rad).scale(length)console.log(v,rad,length)constv1=v0.copy().add(v)ctx.beginPath()ctx.lineWidth=thicknessctx.moveTo(...v0)ctx.lineTo(...v1)ctx.stroke()ctx.closePath()}//璁剧疆瀹氫箟瀹屾垚鍚庯紝鎴戜滑鍏堢敾涓€涓垎鏀瘯璇昫rawBranch(ctx,v0,50,10,Math.PI/2,1)閫掑綊缁樺埗//鍏堝畾涔夋敹缂╁洜瀛恈onstLENGTH_SHRINK=0.9constTHICKNESS_SHRINK=0.8constRAD_SHRINK=0.5constBIAS_SHRINK=1functiondrawBranch(ctx,v0,length,thickness,rad,bias){//....if(thickness>2){//缁樺埗宸﹀垎鏀痗onstleft=Math.PI/4+RAD_SHRINK*(rad+0.2)+drawBranch(ctx,v1,length*LENGTH_SHRINK,thickness*THICKNESS_SHRINK,left,bias)//缁樺埗鍙冲垎鏀痗onstright=Math.PI/4+RAD_SHRINK*(rad-0.2)drawBranch(ctx,v1,length*LENGTH_SHRINK,thickness*THICKNESS_SHRINK,right,bias)}}drawBranch(ctx,v0,50,10,Math.PI/2,1)杩欎竴姝ョ敾鍑烘瘮杈冭鍒欑殑褰㈢姸锛屼唬鐮佸啓鍒拌繖涓€姝ワ紝鏍戠殑鍩烘湰褰㈢姸宸茬粡鍑烘潵浜嗭紝浣嗘槸涓轰簡灞曠ず鏁堟灉锛屽湪vectorflip涓姞鍏ヤ簡涓€浜涢殢鏈烘€э紝缁樺埗鍑烘洿鎺ヨ繎鑷劧鐘舵€佺殑鏍戜唬鐮佸涓嬶細functiondrawBranch(ctx,v0,length,thickness,rad,bias){//....if(thickness>2){//缁樺埗宸﹀垎鏀痗onstleft=Math.PI/4+RAD_SHRINK*(rad+0.2)+bias*(Math.random()-0.5)//娣诲姞涓€浜涢殢鏈烘暟drawBranch(ctx,v1,length*LENGTH_SHRINK,thickness*THICKNESS_SHRINK,left,bias)//缁樺埗鍙冲垎鏀痗onstright=Math.PI/4+RAD_SHRINK*(rad-0.2)+bias*(Math.random()-0.5)//娣诲姞涓€浜涢殢鏈烘暟drawBranch(ctx,v1,length*LENGTH_SHRINK,thickness*THICKNESS_SHRINK,right,bias)}}drawBranch(ctx,v0,50,10,Math.PI/2,1)绛夌瓑锛屾晥鏋滃浘锛氫竴妫靛厜绉冪鐨勬爲锛堟槸涓嶆槸鏈夌偣鏂囪壓锛夊墿涓嬬殑灏辨槸鍔犵偣鐐圭紑鎸備笂fruitUpperfunctiondrawBranch(ctx,v0,length,thickness,rad,bias){//.....if(thickness<5&&Math.random()<0.3){constth=6+Math.random()澶嶅埗浠ｇ爜ctx.save()ctx.strokeStyle='#e4393c'ctx.lineWidth=thctx.beginPath()ctx.moveTo(...v1)ctx.lineTo(v1.x,v1.y+2)ctx.stroke()ctx.closePath()ctx.restore()}}drawBranch(ctx,v0,50,10,Math.PI/2,3)//澧炲姞杩欓噷鐨勯殢鏈哄洜瀛愶紝璁╁垎鏀洿澶氳繖鏃跺€欐晥鏋滃浘灏卞嚭鏉ヤ簡锛氾紙鎴戝啀闂竴涓嬶紝鏄笉鏄緢濂界湅锛岀湡鐨勮鑺卞嚑鐧句竾涔板悧锛夌涓€娆¤皟鐢╠rawBranch鍙互灏濊瘯璋冩暣涓€涓嬪弬鏁板拰鏌ョ湅缁撴灉濡備綍瀹屾垚浠ｇ爜鍦板潃锛歡ithubsummary鏈枃棣栧厛灞曠ず浜嗗浣曞皢canvas鍧愭爣绯昏浆鎹负鐩磋鍧愭爣绯伙紝鐒跺悗閫氳繃瀹炰緥婕旂ず浜嗗浘褰腑鍚戦噺鐨勫熀鏈搷浣溿€傜煝閲忚繍绠楃殑鎰忎箟涓嶄粎浠呮槸璁＄畻鐐圭殑浣嶇疆鍜屾瀯閫犵嚎娈碉紝杩欏彧鏄渶鍩烘湰鐨勭敤娉曘€傝瑙夊憟鐜颁緷璧栦簬璁＄畻鏈哄浘褰㈠锛岃€岀煝閲忚繍绠楁槸鏁翠釜璁＄畻鏈哄浘褰㈠鐨勬暟瀛﹀熀纭€銆傝€屼笖锛屽湪鍚戦噺杩愮畻涓紝闄や簡琛ㄧず绉诲姩鐐瑰拰鐢荤嚎娈靛锛屽悜閲忕殑鐐圭Н鍜屽弶绉繍绠椾篃鏈夌壒娈婄殑鎰忎箟銆傛垜浠槸灏忛粦鏉垮墠绔紝娆㈣繋鍏虫敞鎴戜滑鐨勭煡涔庛€丼egmentfault銆丆SDN銆佺畝涔︺€佸紑婧愪腑鍥藉彿銆?/p>