鏈枃浠嬬粛鐐硅禐+鍏虫敞+涔︾=浜嗚В鍒癐Text鏄疐abric.js鎻愪緵鐨勫彲缂栬緫鏂囨湰鍏冪礌銆傝璁剧疆鏂囨湰棰滆壊锛屾偍鍙互璁剧疆fill銆備絾鏄痜ill浼氳缃墍鏈夋枃瀛楃殑棰滆壊锛屽鏋滃彧鎯充慨鏀规寚瀹氭枃瀛楃殑棰滆壊锛屽彧鐢╢ill灏辨病閭ｄ箞瀹规槗瀹炵幇浜嗐€傝繖绡囨枃绔犺鐨勬槸璁剧疆鎸囧畾鏂囨湰鐨勯鑹插拰鑳屾櫙鑹层€傝缃枃鏈鑹叉垨鑳屾櫙棰滆壊闇€瑕佸叿浣撴儏鍐靛叿浣撳垎鏋愶細鍏ㄦ枃璁剧疆璁剧疆鎸囧畾鏂囨湰棰滆壊锛堝崟琛岋級璁剧疆鎸囧畾鏂囨湰棰滆壊锛堝琛岋級鎺ヤ笅鏉ュ浠ヤ笂鍑犵鎯呭喌杩涜璇存槑閫愪釜銆傚紑濮?canvasid="c"width="600"height="400"style="border:1pxsolid#ccc;">棣栧厛瀵煎叆Fabric.js锛岀劧鍚庡垵濮嬪寲鐢诲竷銆傚鏋滀綘瀵硅繖涓蹇典笉鐔熸倝锛屽彲浠ョ湅鐪婩abric.js浠庡叆闂ㄥ埌鎵╁睍銆傛渶鍚庨€氳繃newfabric.IText鍒涘缓涓€娈垫枃瀛楋紝娣诲姞鍒扮敾甯冧腑銆傚叏鏂囪缃?/鐪佺暐閮ㄥ垎浠ｇ爜constiText=newfabric.IText('helloworld',{fill:'pink'})fill鍙互璁剧疆鏂囨湰鐨勫～鍏呴鑹层€傚湪Fabric.js涓紝杩欎釜灞炴€ф槸鐢ㄦ潵璁剧疆棰滆壊鐨勶紝鍜宑ss涓敤鏉ヨ缃枃瀛楅鑹茬殑棰滆壊涓嶅悓~鍗曡锛氳缃寚瀹氱殑鏂囧瓧棰滆壊constiText=newfabric.IText('helloworld',{styles:{0:{1:{fill:'#f00'//鏂囧瓧棰滆壊锛?f00涓虹孩鑹瞹}}})绗竴娆＄湅鍒颁笂闈唬鐮佺殑鏃跺€欙紝鎴戜篃瑙夊緱鏈夌偣濂囨€紝浣嗕粩缁嗕竴鐪嬶紝鎵嶅彂鐜拌繖鏍疯璁＄殑鐢ㄦ剰銆傛牱寮忔槸涓€涓璞°€俿tyles:{//璁剧疆鏍峰紡0:{//Line11:{//Character2//瑕佽缃殑鏍峰紡}}}涓婇潰鐨勪唬鐮佸氨鏄繖涓剰鎬濄€傝鍙峰拰瀛楃浣嶇疆閮芥槸浠?寮€濮嬭鏁扮殑锛屾湁鐐瑰儚鏁扮粍涓嬫爣銆傛垜浠殑绀轰緥鍙湁1琛岋紝鍥犳琛屽彿涓?銆俥鐨勪笅鏍囦负1銆傛墍浠ヤ笂闈㈢殑浠ｇ爜灏唀璁剧疆涓虹孩鑹层€傚叾浠栧瓧绗︿粛鐒舵槸榛樿棰滆壊銆傚琛岋細璁剧疆鎸囧畾鏂囧瓧棰滆壊constiText=newfabric.IText('hello\nworld',{styles:{//璁剧疆鏍峰紡0:{//line11:{fill:'#f00'//鏂囧瓧棰滆壊}},1:{//Line22:{fill:'hotpink'}}}})IText鐨勬崲琛岀敤\n琛ㄧず銆傚湪姝ょず渚嬩腑锛屽皢绗?琛屼腑绗簩涓瓧绗︾殑鏂囨湰棰滆壊鏇存敼涓虹孩鑹诧紝骞跺皢绗?琛屼腑绗笁涓瓧绗︾殑鏂囨湰棰滆壊鏇存敼涓轰寒绮夎壊銆備綘搴旇鍙互浠庝唬鐮佷腑鐨勬敞閲婁腑鐞嗚В杩欎釜鎿嶄綔銆傝缃枃瀛楄儗鏅壊constiText=newfabric.IText('helloworld',{styles:{0:{1:{textBackgroundColor:'yellowgreen',//backgroundcolor}},})涓庤缃枃瀛楅鑹茬浉鍚岋紝鎹釜鍏抽敭璇嶅氨濂戒簡銆倀extBackgroundColor缈昏瘧鎴愪腑鏂囧氨鏄枃瀛楄儗鏅壊銆備唬鐮佷粨搴撯瓙Fabric璁剧疆IText鎸囧畾瀛楃棰滆壊鍜岃儗鏅鑹叉帹鑽愰槄璇火煈嶃€奆abric.js 绗斿埛鍒板簳鎬庝箞鐢紵銆嬸煈嶃€奆abric.js 鍦嗗舰绗斿埛銆嬸煈嶃€婄函CSS 绾㈢爾鑳屾櫙澧欍€嬸煈嶃€奆abric.js 鑷敱缁樺埗妞渾銆嬬偣璧?鍏虫敞+涔︾=瀛︿範浜?/p>
