杩欑瘒鏂囩珷浠嬬粛鐐硅禐+鍏虫敞+鏀惰棌=瀛﹀埌浜嗗鏋滀綘鎯虫妸鐢诲竷涓殑鎵€鏈夊唴瀹归兘閬綇锛屼綘浼氱敤浠€涔堟柟娉曞憿锛熺┖鐧界敾甯冨唴瀹癸紵鐩存帴鍘绘帀canvas鍏冪礌锛熷湪鐢诲竷涓婂垱寤轰竴涓柊鍏冪礌锛熷鏋滀綘鐨勯」鐩娇鐢ㄤ簡fabric.js锛屼綘鍙互鐩存帴浣跨敤fabric.js鎻愪緵鐨勬柟娉曡鐩朿anvas锛屼娇鐢ㄩ潪甯哥畝鍗曘€傝缃甤anvas.overlayColor鐨勫墠鏅壊overlayColorfabric.js鎻愪緵浜嗕竴涓缃畂verlay棰滆壊鐨勫睘鎬э紝涔熷彲浠ヨ鏄缃墠鏅壊銆俹verlayColor:String|fabric.PatternOverlay鐢诲竷瀹炰緥鐨勯鑹层€傚簲璇ラ€氳繃fabric.StaticCanvas#setOverlayColor璁剧疆浣跨敤杩欎釜灞炴€у湪鐢诲竷鐨勯《灞傚彔鍔犱竴灞傞鑹诧紝鍙互瑕嗙洊鐢诲竷涓殑鎵€鏈夎儗鏅拰鍏冪礌銆傚彲浠ヨ鐩栭粯璁よ儗鏅壊姣斿鎴戣缃皝闈㈤鑹蹭负绮夌孩鑹?/瑕嗙洊棰滆壊backgroundColor:'red'//鑳屾櫙棰滆壊})濡傛灉涓婇潰鐨勪唬鐮佹病鏈夊皢overlayColor璁剧疆涓虹矇绾㈣壊锛岀敾甯冨簲璇ユ湁绾㈣壊鑳屾櫙銆傚彲浠ヨ鐩栬儗鏅浘鐗?canvasid="canvasBox">鍒濆鍖栫敾甯冨悗锛屾垜閫氳繃setBackgroundImage鏂规硶璁剧疆鐢诲竷鐨勮儗鏅浘鐗囥€備粠浠ｇ爜缂栧啓椤哄簭鏉ョ湅锛岃儗鏅浘鏄渶鍚庤缃殑锛屼絾鏄笉浼氳鐩杘verlayColor銆傚彲鍙犲姞鍏冪礌濡傛灉鐩磋涓婅儗鏅浘鍦ㄥ簳灞傦紝overlayColor涓嶈兘瓒婄骇锛岄偅涔堟垜浠彲浠ュ皾璇曞垱寤轰竴涓厓绱狅紝灏嗗厓绱犺缃埌椤跺眰鏉ユ祴璇曟晥鏋溿€?canvasid="canvasBox">浣跨敤bringToFront()鏂规硶灏嗙煩褰㈢殑灞傜骇鎷夊埌鏈€椤跺眰锛屼絾涓嶈兘瓒呭嚭overlayColor銆傚幓闄verlay鍦ㄤ竴浜涘簲鐢ㄥ満鏅紙姣斿娓告垙锛変腑锛岄渶瑕佹彁鍓嶅姞杞絚anvas锛屼絾鏄綋鏌愪釜鏃跺埢鐢ㄦ埛娌℃湁鏉冮檺鏌ョ湅canvas鐨勫唴瀹规椂锛屽彲浠ヤ娇鐢╫verlayColor鏉ヨ鐩栧竼甯冦€傛垜浣跨敤setTimeout鏉ユā鎷熷湪婊¤冻鏌愪簺涓氬姟鏉′欢鍚庡垹闄ゅ彔鍔犲眰鐨勬晥鏋溿€?canvasid="canvasBox">璁剧疆canvas.overlayColor涓簄ull鍚庯紝overlay浼氳绉婚櫎锛屼篃鍙互璁剧疆涓洪€忔槑鎴栫┖瀛楃涓层€傜Щ闄ゅ彔鍔犲眰鍚庯紝闇€瑕佸埛鏂扮敾甯冿紝鎴戜娇鐢╟anvas.renderAll()銆傛洿鐏垫椿鐨勬柟娉晄etOverlayColor闄や簡鍦ㄥ垱寤虹敾甯冩椂璁剧疆overlayColor澶栵紝杩樺彲浠ヤ娇鐢╯etOverlayColor()鏂规硶鍦ㄦ煇涓€鐐硅缃敾甯冮伄缃╅鑹层€俿etOverlayColor(overlayColor,callback)鎺ユ敹2涓弬鏁帮細overlayColor锛氳缃墠鏅壊鎴栧浘妗坈allback锛氬洖璋冨嚱鏁帮紙璁剧疆鍚庡埛鏂扮敾甯冿級浣犳病鐪嬮敊锛宻etOverlayColor鍙互璁剧疆鍥炬锛屼紶鍏ヤ竴寮犲浘鐗囧嵆鍙€備负浜嗘紨绀烘柟渚匡紝鎴戝皢鐢诲竷鐨勫楂樿缃负800*800銆傝缃函鑹?/鐪佺暐閮ㄥ垎浠ｇ爜canvas.setOverlayColor('yellowgreen',//璁剧疆棰滆壊canvas.renderAll.bind(canvas)//鍒锋柊鐢诲竷)濡傛灉浣犳兂鍦ㄥ洖璋冨嚱鏁颁腑鍋氬叾浠栦簨鎯咃紝浣犲彲浠ヨ繖鏍峰啓//鐪佺暐涓€浜涗唬鐮乧anvas.setOverlayColor('pink',function(){console.log('done')canvas.renderAll()})setimage//鐪佺暐涓€浜涗唬鐮乧anvas.setOverlayColor({source:'../../images/bg4.png'},canvas.renderAll.bind(canvas))绗竴涓弬鏁版槸object锛屽湪source涓紶鍏ュ浘鐗囪矾寰勫嵆鍙€傚湪涓婇潰鐨勪緥瀛愪腑锛屽浘鍍忎細鑷姩閲嶅娓叉煋锛岃鐩栨暣涓敾甯冦€傛澶栵紝杩樺彲浠ヨ皟鏁翠笉鍚岀殑灞炴€у弬鏁般€?/鐪佺暐閮ㄥ垎浠ｇ爜canvas.setOverlayColor({source:'../../images/bg4.png',repeat:'no-repeat',//涓嶉噸澶峯ffsetX:200,//Offsetinthex-axisdirectionoffsetY:100//y杞存柟鍚戠殑鍋忕Щ閲弣,canvas.renderAll.bind(canvas))娉ㄦ剰鏈変竴鐐归渶瑕佹敞鎰忥紝overlayColor鐨勪綔鐢ㄦ槸鍦ㄤ笂闈㈣缃竴灞傚彔鍔犻鑹茬敾甯冪殑椤堕儴锛屼絾鐢诲竷鐨勬搷浣滀笉鍙楅檺鍒躲€備粛鐒舵槸涓婇潰鐨勭煩褰㈢ず渚嬨€備粠鍥句腑鍙互鐪嬪嚭榧犳爣鎸囬拡鐨勫彉鍖栵紝鍙互鍒ゆ柇鐢诲竷涓婄殑鐭╁舰杩樻槸鍙互鎿嶄綔鐨勩€備唬鐮佷粨搴撯瓙Fabric.js浣跨敤绾壊瑕嗙洊鐢诲竷猸怓abric.jssetOverlayColor鎺ㄨ崘闃呰馃憤銆奆abric.js 浠庡叆闂ㄥ埌_ _ _ _銆嬸煈嶃€奆abric.js 涓婂垝绾裤€佷腑鍒掔嚎锛堝垹闄ょ嚎锛夈€佷笅鍒掔嚎銆嬸煈嶃€奆abric.js 婵€娲昏緭鍏ユ銆嬸煈嶃€奆abric.js 杈撳嚭绮剧畝鐨凧SON銆嬸煈嶃€奆abric.js 鍔ㄦ€佽缃瓧鍙峰ぇ灏忋€嬸煈嶃€奆abric.js IText 鎵嬪姩璁剧疆鏂滀綋銆嬬偣璧?鍏虫敞+鏀惰棌=瀛︿範浠ｇ爜搴?/p>
