HTML &lt;body&gt; 標簽

例

一個簡單的 HTML 文檔，包含盡可能少的必需的標簽：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

文檔內容......

</body>

</html>

瀏覽器支持

所有主流瀏覽器都支持 <body> 標簽。

標簽定義及使用說明

<body> 標簽定義文檔的主體。

<body> 元素包含文檔的所有內容（比如文本、超鏈接、圖像、表格和列表等等）。

HTML 4.01 與 HTML5之間的差異

在 HTML 5 中，刪除了所有 body 元素的"呈現屬性"。

在 HTML 4.01 中，所有 body 元素的"呈現屬性" 已廢棄。

屬性

屬性	值	描述
alink	color	HTML5 不支持。 HTML 4.01 已廢棄。規定文檔中活動鏈接的顏色。
background	URL	HTML5 不支持。 HTML 4.01 已廢棄。規定文檔的背景圖像。
bgcolor	color	HTML5 不支持。 HTML 4.01 已廢棄。規定文檔的背景顏色。
link	color	HTML5 不支持。 HTML 4.01 已廢棄。規定文檔中未訪問鏈接的顏色。
text	color	HTML5 不支持。 HTML 4.01 已廢棄。規定文檔中所有文本的顏色。
vlink	color	HTML5 不支持。 HTML 4.01 已廢棄。規定文檔中已被訪問鏈接的顏色。

全局屬性

<body> 標簽支持 HTML 的全局屬性。

事件屬性

<body> 標簽支持 HTML 的事件屬性。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

文簡介

點贊 + 關注 + 收藏 = 學會了

IText 是 Fabric.js 提供的一個 可編輯文本 的元素。

要設置文字顏色，可以設置 fill 。

但 fill 會設置所有文字的顏色，如果你只想修改指定文字的顏色，只用 fill 就不是那么容易實現了。

本文要講的就是 設置指定文字的顏色和背景色。

設置文字顏色或背景色，需要分情況討論的：

全文設置
設置指定文字顏色（單行）
設置指定文字顏色（多行）

接下來就將上述情況逐一講解。

起步

<canvas id="c" width="600" height="400" style="border: 1px solid #ccc;"></canvas>

<!-- 引入 Fabric.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/fabric.js/521/fabric.js"></script>

<script>
  // 初始化畫布
  const canvas = new fabric.Canvas('c')

  // 創建文本
  const iText = new fabric.IText('hello world')

  // 將文本添加到畫布里
  canvas.add(iText)
</script>
復制代碼

首先把 Fabric.js 引入，然后初始化畫布。如果對這個概念不太熟的話，可以看看 Fabric.js 從入門到膨脹。

最后通過 new fabric.IText 創建一段文字添加到畫布中。

全文設置

// 省略部分代碼

const iText = new fabric.IText('hello world', {
  fill: 'pink'
})
復制代碼

fill 可以設置文字的填充顏色。在 Fabric.js 里是使用這個屬性設置顏色的，和 css 設置文字顏色使用 color 不一樣~

單行：設置指定文字顏色

const iText = new fabric.IText('hello world', {
  styles: {
    0: {
      1: {
        fill: '#f00' // 文字顏色，#f00是紅色
      }
    }
  }
})
復制代碼

第一次看到上面的代碼時我也覺得有點奇怪，后來仔細看了下才發現這樣設計的用意。

styles 是一個對象。

styles: { // 設置樣式
  0: { // 第1行
    1: { // 第2個字符
      // 要設置的樣式
    }
  }
}
復制代碼

上面這段代碼是這個意思。行號和字符位置都是從0開始算起，有點像數組下標的意思。

我們這個例子只有1行，所以行號是0。

e 的下標是 1 。所以上面的代碼就把 e 設置成紅色了。其他字符還是默認的顏色。

多行：設置指定文字顏色

const iText = new fabric.IText('hello\nworld', {
  styles: { // 設置樣式
    0: { // 第1行
      1: {
        fill: '#f00' // 文字顏色
      }
    },
    1: { // 第2行
      2: {
        fill: 'hotpink'
      }
    }
  }
})
復制代碼

IText 的換行是用 \n 來表達的。

這個例子要 修改第1行第2個字符的文字顏色為紅色，第2行第3個字符為亮粉色 。

從代碼里的注釋應該可以看得懂本次操作。

設置文字背景色

const iText = new fabric.IText('hello world', {
  styles: {
  0: {
    1: {
      textBackgroundColor: 'yellowgreen', // 背景色
    }
  },
})
復制代碼

和設置文字顏色的原理一樣，只是把關鍵字改一改就行。

textBackgroundColor 翻譯成中文就是文本背景色。

代碼倉庫

?Fabric 設置IText指定字符顏色和背景色

整合營銷服務商

HTML &lt;body&gt; 標簽

文簡介

起步

全文設置

單行：設置指定文字顏色

多行：設置指定文字顏色

設置文字背景色

代碼倉庫

推薦閱讀

您的項目需求

整合營銷服務商

HTML &amp;lt;body&amp;gt; 標簽

文簡介

起步

全文設置

單行：設置指定文字顏色

多行：設置指定文字顏色

設置文字背景色

代碼倉庫

推薦閱讀

您的項目需求

HTML <body> 標簽