HTML5 提供了一个强大的功能，即使用 canvas 元素来绘制图形和文本。当绘制文本时，你可能需要将文字加粗或者使用斜体来突出重点。在这篇文章中，我们将介绍如何在 HTML5 画布上实现加粗和斜体文本。
加粗文本
为了在 HTML5 画布上绘制加粗文本，我们需要使用 font-weight 属性。这个属性控制字体的粗细程度，可以设置为以下值之一：normal、bold、bolder、lighter 或一个数字值。下面是一个例子：
-- -------------------- ---- ------- --------- ----- ------ ------ -------------- ---- --------------- ------- ------ -------- ------------- ----------- ---------------------- --------- ----- ------ - ------------------------------------ ----- --- - ------------------------ ---------- - ----- ---- ------- --------------------- ------- --- ---- ---------- ------- -------
在这个例子中，我们使用 ctx.font 设置字体样式为“bold 20px Arial”，这意味着文本将以粗体形式显示。然后，我们使用 ctx.fillText() 方法在画布上绘制文本。
斜体文本
要在 HTML5 画布上绘制斜体文本，我们需要使用 font-style 属性。这个属性控制字体的样式，可以设置为以下值之一：normal、italic 或 oblique。下面是一个例子：
-- -------------------- ---- ------- --------- ----- ------ ------ -------------- ---- --------------- ------- ------ -------- ------------- ----------- ---------------------- --------- ----- ------ - ------------------------------------ ----- --- - ------------------------ ---------- - ------- ---- ------- --------------------- ------- --- ---- ---------- ------- -------
在这个例子中，我们使用 ctx.font 设置字体样式为“italic 20px Arial”，这意味着文本将以斜体形式显示。然后，我们使用 ctx.fillText() 方法在画布上绘制文本。
加粗加斜体文本
如果你想同时在 HTML5 画布上绘制加粗和斜体文本，你可以使用 font-weight 和 font-style 属性的组合。下面是一个例子：
-- -------------------- ---- ------- --------- ----- ------ ------ -------------- ---- --------------- ------- ------ -------- ------------- ----------- ---------------------- --------- ----- ------ - ------------------------------------ ----- --- - ------------------------ ---------- - ----- ------ ---- ------- --------------------- ------- --- ---- ---------- ------- -------
在这个例子中，我们使用 ctx.font 设置字体样式为“bold italic 20px Arial”，这意味着文本将同时以加粗和斜体形式显示。然后，我们使用 ctx.fillText() 方法在画布上绘制文本。
结论
在 HTML5 画布上实现加粗和斜体文本非常简单，只需要使用合适的属性和参数就可以了。希望本文能够对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/14977