瑙︽懜鏂囨。杩囨渤鍓嶈█杩欏嚑澶╂帴浜嗕竴涓伐浣滐紝闇€瑕佸仛涓€涓仠杞﹀満鐨勭ず鎰忓浘銆傛垜棣栧厛鎯冲埌鐨勬槸鐢–anvas鏉ョ敾銆傜敱浜庡墠鏈熷彧鏄矖娴呭湴浣跨敤浜咰anvas锛屽苟娌℃湁鍦ㄩ」鐩腑姝ｅ紡浣跨敤锛屾墍浠ヨ繖娆′篃鏄懜鐫€鏂囨。杩囨渤馃槀銆傚浣曠粯鍒禖anvas鏄敾甯冿紝涓€绉嶉渶瑕佽剼鏈潵缁樺埗鍥惧舰鐨凥tml鏍囩銆?canvas>鐩存帴鍦ㄩ〉闈笂浣跨敤娣诲姞鏍囩锛屽繀椤讳娇鐢ㄨ剼鏈粯鍒跺浘褰arcanvas=document.getElementById('canvas');varctx=canvas.getContext('2d');//璁剧疆瀹藉害鍜岄珮搴anvas.width=500;canvas.height=500;ctx.beginPath();//璧峰璺緞ctx.rect(10,10,100,100);//缁樺埗鐭╁舰ctx.fillStyle='#eee';//濉厖棰滆壊ctx.fill();//pathfill鍙互鐪嬪埌鐢诲竷涓細鍑虹幇涓€涓畝鍗曠殑鐭╁舰鍏朵腑getContext鏄幏鍙朇anvas瀵硅薄锛涘畠鏈変袱涓弬鏁帮細contextType涓婁笅鏂囩被鍨?2d,webgl,webgl2)contextAttributes涓婁笅鏂囧睘鎬э紱璇︽儏璇峰弬鑰僊DN鐢诲竷涓殑榛樿楂樺害300脳150銆傝繖閲岀殑楂樺害璁剧疆闇€瑕佹敞鎰忎竴鐐癸細濡傛灉鎴戜滑浣跨敤css璁剧疆楂樺害锛岀敾甯冧細鎸夌収300脳150鐨勬瘮渚嬬缉鏀撅紝濡傛灉璁剧疆涓?00脳500鍙兘浼氬彉褰€傛墍浠ユ垜浠渶濂戒娇鐢↗avascript鎴栫洿鎺ュ湪鏍囩涓婅缃珮搴﹀拰瀹藉害銆傜粯鍒舵楠や粠涓婇潰涓€绯诲垪鐨勭敤娉曪紝鎴戜滑鍙互鎬荤粨鍑虹粯鍒惰矾寰勭殑澶ф鏂规硶鍒涘缓鐢诲竷锛屼娇鐢↖D鑾峰彇鐢诲竷瀵硅薄varcanvas=document.getElementById('canvas');varctx=canvas.getContext('2d');寮€濮嬬粯鍒惰矾寰勪娇鐢╞eginPath寮€濮嬬粯鍒禼tx.beginPath();缁樺埗璺緞杩欓噷鎴戜滑鍙互浣跨敤Canvas鎻愪緵鐨勫悇绉嶇粯鍒惰矾寰勭殑鏂规硶锛涗竴浜涘父鐢ㄧ殑缁樺埗鏂规硶methoddescriptionarc()createsarcrect()createsrectanglefillRect()缁樺埗鐭╁舰璺緞鍖哄煙strokeRect()缁樺埗鐭╁舰璺緞鎻忚竟arcTo()鍦ㄤ袱鏉″垏绾夸箣闂村垱寤哄渾寮?鏇茬嚎moveTo()灏嗚矾寰勭Щ鍔ㄥ埌鐢诲竷涓殑鎸囧畾鐐硅€屼笉鍒涘缓绾縧ineTo()娣诲姞涓€涓柊鐐癸紝鐒跺悗鍦ㄧ敾甯冧腑鍒涘缓涓€鏉′粠璇ョ偣鍒版渶鍚庢寚瀹氱偣鐨勭嚎clip()浠庡師濮嬬敾甯冧笂瑁佸壀浠绘剰褰㈢姸鍜屽ぇ灏忕殑鍖哄煙quadraticCurveTo()鍒涘缓浜屾璐濆灏旀洸绾縝ezierCurveTo()鍒涘缓涓夋璐濆灏旀洸绾縡ill鎴栬€呯粯鍒惰矾寰勫悗锛屽彲浠ラ€夋嫨鍏抽棴璺緞closePath鎴栬€呯洿鎺ュ～鍏呮垨鑰呮弿杈硅矾寰勶紝杩欎簺鏄竴浜涘父鐢ㄧ殑鏂规硶ctx.fillStyle='#鍛?;//濉厖棰滆壊ctx.fill();//璺緞濉厖ctx.strokeStyle='red';//璺緞鎻忚竟棰滆壊ctx.stroke();//pathstroke姣忎釜缁樺埗鐨勫浘褰㈠浘妗堝彲浠ュ垎涓哄洓涓熀鏈楠ゃ€傛垜浠渶瑕佷簡瑙ｇ殑鍏跺疄鏄瘡娆＄粯鍒剁殑鍧愭爣鐐广€傚彧瑕佸潗鏍囩偣纭畾浜嗭紝缁樺埗鍑烘潵鐨勫浘褰㈣繕鏄病鏈夐敊璇殑銆傜敾甯冩搷浣滃仠杞﹀満缁樺埗瀹屾垚鍚庯紝闇€瑕佺偣鍑昏溅浣嶆樉绀鸿溅浣嶄娇鐢ㄦ儏鍐碉紱鐢变簬鐐瑰嚮Canvas鍙兘鐩戞祴鐐瑰嚮鐨勫潗鏍囩偣锛屾墍浠ラ渶瑕佸垽鏂敤鎴风偣鍑荤殑浣嶇疆鏄惁鍦ㄨ溅浣嶅唴锛岀幇鍦ㄦ垜浠煡閬撹溅浣嶈捣鐐瑰潗鏍囧拰杞︿綅瀹藉拰楂橈紝鎵€浠ュ垽鏂潯浠朵负//鐢ㄦ埛鐐瑰嚮鍧愭爣鐐?/杞︿綅缁樺埗淇℃伅polylinePointsfunctioncheckPointInPolyline(point,polylinePoints){//褰搙>杞︿綅璧风偣&&x<璧风偣+杞︿綅瀹藉害&&y>璧风偣&&y<璧风偣+鍋滆溅楂樺害if(point.x>=polylinePoints.x&&point.x<=polylinePoints.x+polylinePoints.w&&point.y>=polylinePoints.y&&point.y<=polylinePoints.y+polylinePoints.h){returntrue;}else{杩斿洖閿欒锛涙垜浠兘鐭ラ亾鐢诲竷鍦ㄧ粯鍒惰繃绋嬩腑鏄粠椤甸潰宸︿笂瑙掔殑鍘熺偣(0,0)寮€濮嬬殑锛屼絾鏄敱浜庡仠杞﹀満鏄瀭鐩村眳涓殑甯冨眬锛屽綋鎴戜滑鐐瑰嚮鐨勬椂鍊欏緱鍒扮殑鍧愭爣canvas鐨勫師鐐规槸锛氬彲浠ョ湅鍒板緱鍒颁簡涓€涓笉闈犺繎(0,0)鐨勫潗鏍囩偣锛屽洜涓洪紶鏍囨槸浠ocumnet鐨勫乏涓婅涓哄師鐐瑰緱鍒板潗鏍囷紱鎵€浠ュ鏋滅偣鍑诲仠杞︿綅涓殑鏌愪釜鐐癸紝闇€瑕佸鐐瑰嚮鐨勭偣(x,y)杩涜鍙樻崲銆傝繖閲岄渶瑕佺敤鍒癵etBoundingclientRect鍑芥暟锛岃鍑芥暟鐢ㄤ簬鑾峰彇椤甸潰涓煇涓厓绱犵浉瀵逛簬娴忚鍣ㄧ獥鍙ｇ殑宸︿笂鍙充笅浣嶇疆锛涗娇鐢ㄥ緱鍒扮殑left鍜宼op鍊艰繘琛岃浆鎹etBoundingClientRect()return{x:x-_info.left,y:y-_info.top}}鎺ヤ笅鏉ュ彲浠ョ湅鍒板潗鏍囩偣鎺ヨ繎鐢诲竷鍘熺偣(0,0)銆侳onts鍦–anvas涓婄粯鍒跺瓧浣擄紝鍏抽敭鏄鐢ㄥ埌fillText(text,x,y[,maxWidth])鍑芥暟锛歵ext灏辨槸鏂囨湰x锛寉灏辨槸缁樺埗鐨勮捣鐐筸axWidth濉厖鐨勬枃鏈墍鍗犵殑鏈€澶у搴︿竴涓畬鏁寸殑瀛椾綋缁樺埗涔熷緢绠€鍗昪tx.fillStyle='#333';ctx.font='18pxSimSun,SongtiSC';ctx.textAlign='center';ctx.textBaseline='middle';ctx.fillText('imondo.cn',200,200);浣嗘槸褰撴垜浠浣跨敤鑷畾涔夊瓧浣撴椂锛屼娇鐢ㄥ父瑙勭殑@font-face璁剧疆鏄病鏈夌敤鐨勶紝鍥犱负娴忚鍣ㄥ姞杞界殑瀛椾綋涓€鑸兘鏄噿鍔犺浇鐨勶紝鍦ㄧ粯鍒惰繃绋嬩腑瀛椾綋骞舵病鏈夊姞杞芥垚鍔燂紱杩欓噷鎺ㄨ崘涓€涓柊鐨凙PInewFontFace鍙互鐩戞帶瀛椾綋鍔犺浇锛屽畠鏄竴涓狿ormiseconstmyFont=newFontFace('myFont','url(./webfont.ttf)');var_this=杩欎釜锛沵yFont.load().then((font)=>{document.fonts.add(font);}).then(function(){ctx.fillStyle=color;ctx.font=fontSize+'myFont';ctx.textAlign='center';ctx.textBaseline='middle';ctx.fillText(text,x,y);});鍏煎鎬ц繕涓嶉敊锛屽綋鐒朵笉鑰冭檻IE锛圛E锛氳寰楄鍐掔姱浜嗮煒傦級CanvasrotationandscalingCanvasrotationandscaling鍒嗗埆浣跨敤rotate鍜宻cale銆傛渶闇€瑕佹敞鎰忕殑鏄紝瀹冧滑閮芥槸鏍规嵁榛樿鐨勪腑蹇冪偣(0,0)杩涜鏃嬭浆鎴栫缉鏀剧殑锛屾墍浠ュ湪杩涜鎿嶄綔涔嬪墠锛屾垜浠渶瑕佷娇鐢╰ranslate鏉ユ敼鍙樹腑蹇冪偣銆傚綋鎴戜滑闇€瑕佸皢鏂囧瓧鏃嬭浆90掳鏃讹紝闇€瑕佸厛鏀瑰彉涓績鐐癸紝鐒跺悗鍐嶆棆杞€傛棆杞箣鍚庯紝鎴戜滑闇€瑕佸啀娆℃仮澶嶄腑蹇冪偣銆傚惁鍒欙紝涓嬫缁樺埗beginPath鏃讹紝ctx.beginPath()ctx.translate浼氭牴鎹畉ranslate(200,200)鍚庣殑涓績鐐圭粯鍒讹紱ctx.rotate(90*Math.PI/180)ctx.translate(-200,-200);ctx.fillStyle='#333';ctx.font='18pxSimSun,鏉句綋SC';ctx.textAlign='灞呬腑';ctx.textBaseline='涓棿';ctx.fillText('imondo.cn',200,200);鍚屾牱鐨勭缉鏀炬搷浣滀篃鏄竴鏍风殑ctx.translate(200,200);ctx.scale(1.5,1.5);ctx.translate(-200,-200);瀹為檯涓婏紝缁樺浘寮€濮嬬殑鍧愭爣灏辨槸闇€瑕佸钩绉荤殑鍧愭爣銆傜Щ鍔ㄧ妯＄硦澶勭悊缁樺埗鍑烘暣涓仠杞﹀満鍚庯紝鏁堟灉杩樹笉閿欙紱浣嗗湪鎵嬫満涓婃墦寮€锛屽嵈妯＄硦涓嶆竻锛岃浜鸿繎瑙嗗嚑鐧惧害锛涘叏缃戞煡浜嗭紝杩樻槸绉诲姩璁惧鍍忕礌姣旂殑闂銆傝В鍐虫柟娉曟槸妫€娴嬭澶囩殑鍍忕礌姣旓紝缁樺埗鍊嶆瘮鍑芥暟瀵瑰簲鐨刢anvas鍏冪礌createHDCanvas(w=300,h=150){varratio=window.devicePixelRatio||1;varcanvas=document.getElementById('canvas');鐢诲竷.width=w*ratio;//瀹為檯娓叉煋鍍忕礌canvas.height=h*ratio;//瀹為檯娓叉煋鍍忕礌canvas.style.width=`${w}px`;//鎺у埗鏄剧ず灏哄canvas.style.height=`${h}px`;//鎺у埗鏄剧ず鐨勫ぇ灏廲anvas.getContext('2d').setTransform(ratio,0,0,ratio,0,0);returncanvas;}鏁翠釜鐢诲浘鎬荤粨浜嗗樊涓嶅鍗婂ぉ锛屼富瑕佹槸瀵笴anvas涓嶇啛鎮夛紝浣嗘槸鐢诲畬涔嬪悗锛屽鏁翠釜鐢诲浘杩囩▼鏈変簡鏇存竻鏅扮殑璁よ瘑锛涘鍚庨潰鐨勪竴浜涗笟鍔℃妧鏈繕鏄湁涓€瀹氬偍澶囩殑馃槉銆傛渶鍚庨檮涓婏細鍋滆溅鍦烘晥鏋滄簮鐮侊細鍦板潃鍙傝€冿細Canvas鍐呴儴鍏冪礌鐐瑰嚮浜嬩欢鐨勪笁绉嶇洃鍚柟寮忋€備笅闈㈣涓€涓嬮€変腑鐢诲竷鍏冪礌鏃剁敾甯冩樉绀烘ā绯婄殑闂銆?/p>
