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> 标签