鏈枃浠嬬粛鐐硅禐+鍏虫敞+涔︾=瀛︿範浜咶abric.js寮€鍚粯鐢绘ā寮忓悗锛屽彲浠ヨ缃敾绗旂殑鏍峰紡銆傛湁鍑犵绫诲瀷鐨勫埛瀛愩€傛湰鏂囦富瑕佷粙缁岶abric鍩虹绗斿埛鐨勪娇鐢ㄦ柟娉曘€備箣鍓嶅啓浜嗐€奆abric.js 姗＄毊鎿︾殑鐢ㄦ硶銆嬶紝涔熸槸鐢ㄧ殑鐢诲浘妯″紡銆傚鏋滄偍鏈夊叴瓒ｏ紝鍙互鏌ョ湅涓€涓嬨€傛湰鏂囦娇鐢‵abric.js5.2.1鐨勫父鐢ㄩ厤缃€傞鍏堥渶瑕佸紑鍚痗anvas鐨勭粯鐢绘ā寮忥紝鍥犱负鏅€氱殑妗嗛€夋ā寮忔槸涓嶆敮鎸佺粯鐢荤殑銆傚紑濮?canvasid="c"width="600"height="400"style="border:1pxsolid#ccc;">灏唅sDrawingMode璁剧疆涓簍rue浠ュ惎鐢ㄥ畠銆傝繖涓€姝ラ潪甯搁噸瑕併€傚彧鏈夊皢isDrawingMode璁剧疆涓簍rue锛屾湰鏂囧悗闈㈢殑鎿嶄綔鎵嶆湁鎰忎箟銆傚鏋滀笉鎯冲湪鍒濆鍖栫殑鏃跺€欒缃甶sDrawingMode锛屼篃鍙互鍦ㄥ悗闈娇鐢╟anvas.isDrawingMode=true鏉ヨ缃€傛敞鎰忥細浠ヤ笅鎵€鏈夋搷浣滃潎浠モ€滃叆闂ㄢ€濅唬鐮佷负鍑嗭紒锛侊紒璁剧疆鐢荤瑪鐨勫搴?/鐪佺暐鈥滃紑濮嬧€濅唬鐮乧anvas.freeDrawingBrush.width=20//鍙互閫氳繃淇敼鐢荤瑪鐨勫搴︽潵璋冩暣鐢荤瑪鐨勫搴︺€傝缃敾绗旈鑹?/鐪佺暐鈥渟tart鈥濅唬鐮乧anvas.freeDrawingBrush.width=20//鐢荤瑪瀹藉害canvas.freeDrawingBrush.color='pink'//鐢荤瑪棰滆壊鎴戞妸鐢荤瑪鐨勫搴﹁缃负20锛岃繖鏍锋洿瀹规槗鏄剧ず褰卞搷銆傝櫄绾?/鐪佺暐鈥淪tart鈥濅唬鐮乧anvas.freeDrawingBrush.width=20//鐢荤瑪瀹藉害canvas.freeDrawingBrush.strokeDashArray=[20,50]//strokedasharray浣跨敤strokeDashArray璁剧疆铏氱嚎锛屼篃鍙互浼犲ぇ浜?涓弬鏁帮紝鏁堟灉鑷繁鐪嬪惂銆傛姇褰?/鐪佺暐鈥滃紑濮嬧€濅唬鐮乧anvas.freeDrawingBrush.width=20//鐢荤瑪瀹藉害//鐢荤瑪鎶曞奖canvas.freeDrawingBrush.shadow=newfabric.Shadow({blur:10,//缇藉寲搴ffsetX:10,//x杞村亸绉籵ffsetY:10,//y杞村亸绉籧olor:'#30e3ca'//鎶曞奖棰滆壊})鑷敱缁樺埗鍙楃敾甯冨ぇ灏忛檺鍒?/鐪佺暐鈥滃紑濮嬧€濅唬鐮乧anvas.freeDrawingBrush.width=20//鐢荤瑪瀹藉害canvas.freeDrawingBrush.limitedToCanvasSize=true//褰撲负鈥渢rue鈥濇椂锛岃嚜鐢辩粯鍥捐闄愬埗鍦ㄧ敾甯冨ぇ灏忋€傝琛屾湯灏剧殑鐢荤瑪鏍峰紡canvas.freeDrawingBrush.strokeLineCap='round'闄や簡鍦嗗舰锛屽鎺ユ垨鏂瑰舰鏄彲閫夌殑銆傞粯璁や负鍦嗗舰銆傜敾绗旂殑杈硅鏍峰紡canvas.freeDrawingBrush.strokeLineJoin='miter'闄や簡鏂滆锛岃繕鍙互閫夋嫨鏂滆鎴栧渾褰€傝缃敾绗旂殑鏈€澶ф枩鎺ラ暱搴anvas.freeDrawingBrush.strokeLineJoin='miter'//鐢荤瑪鐨勮竟瑙掓牱寮廲anvas.freeDrawingBrush.strokeMiterLimit=10//鏈€澶ф枩鎺ラ暱搴︾殑璁剧疆strokeMiterLimit灞炴€ч€傜敤浜巗trokeLineJoin涓烘枩鎺ャ€傚暟鍡︿簩鍙ュ埛鏄疐abric.js涓潪甯稿熀纭€鐨勪竴涓伐鍏凤紝涔熸槸闈炲父甯哥敤鐨勩€傚父鐢ㄥ満鏅細鍦ㄧ嚎PS鐢绘澘涓婄殑鍦ㄧ嚎淇鎿嶄綔锛屾瘮濡傚井淇℃埅鍥撅紝涔熸湁鍒锋満鍔熻兘銆傚綋鐒跺井淇℃埅鍥剧殑鐢荤瑪涓嶄竴瀹氭槸鐢‵abric.js瀹炵幇鐨勶紝浣嗘槸鍙互璇村涔犱簡Fabric.js鍚庢垜浠湁鑳藉姏瀹炵幇绫讳技鐨勫姛鑳絶Fabric.js涔熸彁渚涗簡鍏朵粬鐨勭敾绗旓紝浣嗘槸濡傛灉浣犲凡缁忓鏋滀綘鐭ラ亾濡備綍浣跨敤鍩烘湰鐢荤瑪锛屽涔犲叾浠栫敾绗斾細鏇村鏄撱€備唬鐮佷粨搴撯瓙鍘熺増浠ｇ爜鎺ㄨ崘闃呰馃憤銆奆abric.js 鑷敱缁樺埗妞渾銆嬸煈嶃€奆abric.js 姗＄毊鎿︾殑鐢ㄦ硶锛堝寘鍚仮澶嶅姛鑳斤級銆嬨€奆abric.js 鑷畾涔夊彸閿彍鍗曘€嬸煈嶃€奆abric.js 浠庡叆闂ㄥ埌鑶ㄨ儉銆嬬偣璧?鍏虫敞+鏀惰棌=瀛︿範浜?/p>
