鍓嶈█canvas涓Щ鍔ㄥ浘鐗囥€佺Щ鍔ㄧ煩褰綘鍙兘瑙佸浜嗐€備絾鏄垜涓轰粈涔堣鍐欒繖鏍蜂竴绡囨枃绔犲憿锛屽洜涓轰綔鑰呭仛杩?D鍥惧舰涓嬬殑杩愬姩銆傚寘鎷Щ鍔ㄧ珛鏂逛綋鐨勪竴鏉¤竟锛屼竴涓潰锛岀Щ鍔ㄥ杈瑰舰鐨勪竴涓偣銆傛渶杩戜竴鐩村湪鍐檆anvas鐩稿叧鐨勬枃绔犮€傛垜鎯冲涔犱竴涓嬨€傜湅瀹岃繖绡囨枃绔狅紝浣犲彲浠ヤ簡瑙ｅ埌锛岄€氳繃绉诲姩鐭╁舰鐨勪竴涓偣锛屼竴鏉¤竟锛屾暣涓潰鐨勭Щ鍔ㄣ€傛湰鏂囩敱娴呭叆娣憋紝甯屾湜澶у鑰愬績闃呰銆傛兂璞¤〃闈㈢殑杩愬姩锛屽疄鐜扮敾甯冧笅鐨勮繍鍔ㄥ姛鑳姐€傜涓€姝ユ槸鍒涘缓涓€涓猚anvas锛屽湪canvas涓坊鍔犱竴涓猰ove浜嬩欢锛岃繖鏍锋垜浠氨鍙互瀹炴椂鑾峰彇鍒版垜浠紶鏍囩殑浣嶇疆锛屾帴涓嬫潵鎴戜滑鍙渶瑕佷笉鏂殑娓呯┖canvas锛岄噸鏂扮粯鍒剁煩褰㈠嵆鍙€侽K锛岃〃闈㈢Щ鍔ㄥ垵姝ュ疄鐜颁簡銆傛垜灏嗛噸鍐欐垜灏嗗湪涓嬮潰鍐欑殑涓€浜涘姩浣滐紝杩欓噷棣栧厛鏄竴涓揩閫熺畝鍗曠殑鐗堟湰銆俢onstcanvas=document.getElementById('canvas');constctx=canvas.getContext('2d');constwidth=100;constheight=100;drawRect();鍑芥暟drawRect(x=10,y=10,scale=1){ctx.clearRect(0,0,1800,800);consthalfwidth=width*scale/2;consthalfheight=height*scale/2;ctx.strokeRect(x-halfwidth,y-halfheight,width*scale,height*scale)}letisMove=true;canvas.addEventListener('mousemove',(e)=>{if(!isMove){return}constx=e.clientX;consty=e.clientY;drawRect(x,y)})canvas.addEventListener('click',(e)=>{isMove=!isMove;});isMove鍙橀噺鍙槸涓€涓紑鍏筹紝鎴戜滑涓嶈兘涓€鐩寸Щ鍔紝澶疮浜嗭紝榧犳爣鐐瑰嚮鏆傚仠銆傝嚦浜庝笂闈负浠€涔堢敤x-halfwidth锛寉-halfheight锛岃繖閲岃В閲婁竴涓嬶細strokeRect鏄粠鐭╁舰鐨勫乏涓婅寮€濮嬬敾鐨勶紝浣嗘槸鎴戞兂鎶婄煩褰㈡斁鍦ㄩ紶鏍囩殑涓績锛屾墍浠ュ噺鍘粀idth鍜岄珮搴﹁冻澶熷彲浠ュ畬缇庡睍绀恒€傜涓€涓棶棰樻槸鐐圭殑绉诲姩锛熸垜浠€庝箞鐭ラ亾鎴戜滑閫夋嫨浜嗗摢涓€鐐癸紵杩欓噷鎴戝仛浜嗕竴涓畝鍗曠殑鍒ゆ柇锛岄€氳繃姣旇緝榧犳爣鐐瑰嚮鐨勪綅缃拰鐭╁舰鍚勭偣鐨勪綅缃紝鐪嬪摢涓€涓渶鎺ヨ繎浣滀负鐩爣鐐广€傚洜涓烘垜浠殑2D鐐圭殑绉诲姩鍏跺疄灏辨槸瑕佹壘鍒颁笌杩欎釜鐐圭浉鍏宠仈鐨勭嚎娈碉紝鎵€浠ユ垜浠彧闇€瑕侀噸鏂扮敓鎴愮浉鍏宠仈鐨勭嚎娈靛嵆鍙紝浣嗘槸鏈変竴涓毦澶勭悊鐨勫湴鏂瑰憿锛熷彧鏄Щ鍔ㄤ竴涓崐鍦嗭紵濡傛灉鎴戜滑绉诲姩鍗婂渾鐨勬柇鐐癸紝杩欏氨娑夊強鍒板渾寮х殑鍙樺寲锛屽彲鑳藉彉鎴愭き鍦嗗姬锛屾垨鑰呯敤浜岄樁鎴栦笁闃惰礉濉炲皵鏇茬嚎琛ㄧず銆備篃鏄湪鐢诲竷涓婄Щ鍔ㄤ竴涓浘褰㈠拰鍏朵粬鍥惧舰鏉ュ舰鎴愪竴涓垏鍙ｏ紵鏄笉鏄篃瑕佺爫绠楁硶锛熷叾瀹炰綘鍙互鐢–lipper鏉ユ壘浜ら泦鍜屼笉鍚岀偣銆傛湁鍏磋叮鐨勫悓瀛﹀彲浠ヨ嚜琛屼簡瑙ｏ紝涓嶈繃杩欎簺閮戒笉鏄垜杩欑瘒鏂囩珷瑕佽瑙ｇ殑銆傛湰鏂囦腑鐨勬墍鏈夌ず渚嬶紙鍙敮鎸佺洿绾挎槸LineSegment锛夈€侽K锛屾垜浠涓€姝ユ槸閲嶆柊琛ㄨ揪鐭╁舰锛屽洜涓洪噸鏂拌〃杈惧洓杈瑰舰涓嶅绗肩粺鍜屽噯纭€傜煩褰㈠拰姝ｆ柟褰㈠彧鏄壒渚嬨€傚湪杩欓噷鎴戠粰鍑虹悊鐢憋紵涓轰粈涔堬紵涓€涓緢绠€鍗曠殑妗堜緥锛岀Щ鍔ㄥ洓杈瑰舰鐨勪竴涓偣锛屽彲鑳戒細鍙樻垚濡備笅锛歰k涓轰簡鏇村ソ鐨勮〃杈句笅闈㈢殑鍐呭锛屾垜浠柊寤轰竴涓狿oint2d绫伙紝鐢ㄤ竴涓疄渚嬫潵琛ㄧず鐢诲竷涓婄殑姣忎竴涓偣銆傜被Point2d{鏋勯€犲嚱鏁帮紙x锛寉锛墈this.x=x||0;杩欎釜.y=y||0;}clone(){returnthis.constructor(this.x,this.y);}娣诲姞锛坴锛墈this.x+=v.x;this.y+=v.y杩斿洖杩欎釜锛泒random(){this.x=Math.random()*1800;this.y=Math.random()*800;returnthis}}鎺ヤ笅鏉ワ紝鎴戜滑灏嗙煩褰㈢殑闀垮拰瀹介殢鏈烘坊鍔犲埌榧犳爣鍦ㄧ敾甯冧笂鐨勪綅缃紝缁樺埗涓€涓煩褰€備唬鐮佸涓嬶細functiondrawFourPolygon(x,y,width=50,height=50){ctx.clearRect(0,0,1800,800);ctx.beginPath();ctx.moveTo(x-瀹藉害/2,y-楂樺害/2)ctx.lineTo(x+瀹藉害/2,y-楂樺害/2)ctx.lineTo(x+瀹藉害/2,y+楂樺害/2)ctx.lineTo(x-width/2,y+height/2)ctx.closePath()ctx.stroke()}涓轰簡璁╀氦浜掓洿瀹岀編锛岄鍏堢偣鍑婚紶鏍囩‘瀹氱Щ鍔ㄧ殑璧风偣锛岀劧鍚庤繛缁紶鏍囩殑绉诲姩鏄Щ鍔ㄧ殑缁堢偣锛屼粠鑰岀‘瀹氫竴涓悜閲忋€傝繖閲屾垜娣诲姞浜嗚櫄绾垮姛鑳斤紝璁╁畠鍦ㄧЩ鍔ㄧ殑鏃跺€欐洿鍔犳槑鏄撅紝浠ｇ爜濡備笅ctx.setLineDash([5,10]);ctx.beginPath();ctx.moveTo(寮€濮?x,寮€濮?y);ctx.lineTo(end.x,end.y);ctx.closePath()ctx.stroke();鎴戝緱鍒扮殑鏄痑pi鍙傛暟canvassetLineDash鐨勬剰鎬濓紝瀹炵嚎鐨勮窛绂绘槸5锛岀┖绾跨殑璺濈鏄?0锛岃繖鏍锋潵鍥炶蛋灏卞舰鎴愪簡涓€鏉¤櫄绾裤€俿tart鍜宔nd鏄紶鏍囩偣鍑荤‘瀹氳捣鐐癸紝鐒跺悗榧犳爣涓€鐩寸Щ鍔ㄥ埌缁堢偣銆傝繖閲屾湁涓皬鎻愮ず锛屾垜鍦ㄩ紶鏍囩Щ鍔ㄧ殑杩囩▼涓厛鐢讳簡涓€鏉¤櫄绾匡紝鐒跺悗鐢讳簡涓€涓煩褰€傛墍浠ュ憿锛熺煩褰㈡垜浠粛鐒舵湁瀹炵嚎銆傛垜浠湪杩欓噷淇敼浜嗙粯鍒剁煩褰㈢殑浠ｇ爜锛屾仮澶嶄簡铏氱嚎銆備唬鐮佸涓嬶細ctx.setLineDash([]);OK鏁翠綋浜や簰鍑烘潵浜嗭紝鍏堢粰澶у鐪嬬湅鏁堟灉锛氭槸涓嶆槸鏈夌偣鎰熻鍝堝搱鍝堬紵浠庣敾闈笂鐪嬶紝杩欒繕鏄竴涓暣浣撶殑鍔ㄤ綔锛岃€屼笉鏄竴涓偣鐨勫姩浣溿€傜敱浜庢垜鐢荤殑鍥惧舰鏄敤榧犳爣鐐瑰嚮鐨勭偣鐢讳簡涓€涓煩褰紝鎵€浠ユ垜涓嬬瘒鏂囩珷浼氬悜澶у浠嬬粛涓嶈鍒欏杈瑰舰鐐圭殑绉诲姩銆傝繖绡囨枃绔犳垜浠繕鏄亣璁炬垜鏄Щ鍔ㄥ彸涓婅鐨勯偅涓偣銆侽K鎴戜滑鍙互浠庣Щ鍔ㄧ殑璧风偣鍜岀粓鐐瑰緱鍒颁竴涓Щ鍔ㄧ殑鍚戦噺锛屾墍浠ユ垜浠彧闇€瑕佸皢瑕佺Щ鍔ㄧ殑鐐瑰姞鍒拌繖涓悜閲忎笂鍗冲彲銆傝繖鏍凤紝鎴戜滑鏄惁瀹炵幇浜嗙偣鐨勭Щ鍔ㄥ憿锛焎onstmoveVec=end.clone().sub(start);constrightTop=newPoint2d(x+width/2,y-height/2).clone().add(moveVec)鍦ㄨ繖閲屾垜鏀瑰彉浜嗗彸涓婅鐨勭偣锛屼絾鏄湁涓€涓棶棰橈紝鎴戜滑鐐瑰嚮骞惰浆鍒扮浉鍚岀殑鍔熻兘锛屾墍浠ユ垜浠鍔犱竴涓猻witch鏉ュ垽鏂紝涓昏鍒ゆ柇鏄涓€娆＄偣鍑昏繕鏄Щ鍔ㄣ€備唬鐮佸涓嬶細ctx.lineTo(isSelect?rightTop.x:x+width/2,isSelect?rightTop.y:yheight/2)//鐪嬬偣鍑荤Щ鍔ㄤ簨浠跺垏鎹㈡槸isSelect鍙橀噺canvas.addEventListener('mousemove',(e)=>{if(!isMove){return}constx=e.clientX;consty=e.clientY;clearRect();end=newPoint2d(x,y);drawDashLine(start,end);drawFourPolygon(start)})canvas.addEventListener('click',(e)=>{//杩欐槸涓€涓瘡娆℃竻闄ょ敾甯冪殑鍑芥暟clearRect()isMove=!isMove;constx=e.clientX;consty=e.clientY;start=newPoint2d(x,y);drawFourPolygon(start)isSelect=true;});鏁堟灉鍥惧涓嬶細鍝堝搱鍝堬紝鏄笉鏄緢涓濇粦鍛紵鎴戝彂鐜癱anvas鐨勭粯鍥炬€ц兘杩樻槸寰堜笉閿欑殑銆備絾鏄繕鏈変竴涓棶棰橈紝鍒ゆ柇缁撴灉锛岀湅涓婇潰鐨勪唬鐮侊紝鎴戜滑鍙互鍒ゆ柇缁撴灉鏄湁闂鐨勩€傛墍浠ユ渶鍚庢垜鏄寜浣廰lt閿綔涓烘渶缁堢粨鏋滐紝瀹岀編锛岃繖閲屽氨涓嶅睍绀轰唬鐮佷簡銆傜嚎鐨勮繍鍔ㄦ湁鐐圭殑杩愬姩锛岀嚎鐨勮繍鍔ㄨ〃鐜扮殑寰堢畝鍗曘€傜嚎鐨勭Щ鍔ㄥ疄闄呬笂鏄搴旂偣鐨勭Щ鍔ㄣ€傛垜浠互鍙宠竟閭ｆ潯绾夸负渚嬶細浠ｇ爜鏀瑰啓濡備笅锛?[]);ctx.beginPath();const{x,y}=鐐癸紱constmoveVec=end.clone().sub(start);//瀹為檯涓婂彸涓婅鍜屽彸涓嬭鐨勭偣鍚屾椂绉诲姩constrightTop=newPoint2d(x+width/2,y-height/2).clone().add(moveVec)constrightBottom=newPoint2d(x+瀹藉害/2,y+楂樺害/2).clone().add(moveVec)ctx.moveTo(x-瀹藉害/2,y-楂樺害/2)ctx.lineTo(isSelect?rightTop.x:x+width/2,isSelect?rightTop.y:y-height/2)ctx.lineTo(isSelect?rightBottom.x:x+width/2,isSelect?rightBottom.y:y+height/2)ctx.lineTo(x-width/2,y+height/2)ctx.closePath()ctx.stroke()}鏉ョ湅鏁堟灉鍥撅細鎬荤粨鏈枃涓昏浠嬬粛2D鍥惧舰涓嬫渶鍩烘湰鐨勫彉鍖栧拰绉诲姩銆備笉绠℃槸绾跨殑杩愬姩杩樻槸闈㈢殑杩愬姩锛屽綊鏍圭粨搴曢兘鏄偣鐨勮繍鍔ㄣ€傚叾瀹炶繍鍔ㄩ櫎浜嗗悜閲忚繕鍙互鐢ㄧ煩闃垫潵琛ㄧず锛屾垨鑰呮垜浠彲浠ョ敤鐭╅樀鐨勫彉鍖栨潵琛ㄧず鏃嬭浆銆佺Щ鍔ㄣ€佺缉鏀剧瓑鍛戒护銆傛渶鍚庯紝鎰熻阿澶у闃呰鍒版渶鍚庛€傜爜瀛楀苟涓嶅鏄撱€傚鏋滄偍闃呰浜嗗鎮ㄦ湁甯姪鐨勫唴瀹癸紝璇风粰鎴戠偣璧烉煈嶅苟鍏虫敞銆傛偍鐨勬敮鎸佹槸鎴戜笉鏂洿鏂板ソ鏂囩珷鐨勬渶澶у姩鍔涖€傛墍鏈変唬鐮侀兘鍦ㄦ垜鐨刧ithub涓娿€傛杩庡ぇ瀹秙tar銆?/p>
