在背景上的画布上写文字 [英] Write text on canvas with background

问题描述

是否可以在画布上写图像并在背景上写文本？
例如：

Is it possible to write image on canvas and write text with background? For example like this:

推荐答案

文本在画布中的工作方式

不幸的是，不能，您无法使用text方法生成带有背景的文本-只能填充或勾勒出文本本身。

How text works in canvas

Unfortunately no, you can't produce text with background with the text methods - only fill or outline the text itself.

这是因为字体（字体）中的字形被转换为单个字形形状或路径（如果需要），其背景将是字形本身的内部部分（使用填充时看到的部分）。除了使用其几何位置以外，该字形还没有使用黑盒（该字形适合的矩形）所在的图层，因此我们需要提供一种黑盒并自己承载。

This is because the glyphs from the typeface (font) are converted to individual shapes or paths if you want, where the background of it would be the inner part of the glyph itself (the part you see when using fill). There is no layer for the black-box (the rectangle which the glyph fits within) the glyph is using besides from using its geometric position, so we need to provide a sort-of black-box and bearings ourselves.

在旧计算机系统上，大多数字体是二进制字体，用于设置或清除像素。除了清除背景之外，还可以选择提供背景。默认情况下，基于矢量的字体不是这种情况（浏览器可以直接访问字形几何，并可以通过这种方式提供背景）。

On the old computer systems most fonts where binary font which where setting or clearing a pixels. Instead of just clearing the background one could opt to provide a background instead. This is not the case with vector based typefaces by default (a browser has direct access to the glyphs geometry and can therefor provide a background this way).

要创建背景，您需要先使用其他方式（例如形状或图像）绘制背景。

In order to create a background you would need to draw it first using other means such as shapes or an image.

示例：

ctx.fillRect(x, y, width, height);

或

ctx.drawImage(image, x, y  [, width, height]);

然后在顶部绘制文本：

ctx.fillText('My text', x, y);

您可以使用 measureText 来查找文本的宽度（将来还有高度：上升+下降）并以此为基础：

You can use measureText to find out the width of the text (in the future also the height: ascend + descend) and use that as a basis:

var width = ctx.measureText('My text').width; /// width in pixels

您可以将所有这些包装在函数中。这里的功能是基本功能，但是您可以使用颜色和背景参数以及填充等来扩展它。

You can wrap all this in a function. The function here is basic but you can expand it with color and background parameters as well as padding etc.

/// expand with color, background etc.
function drawTextBG(ctx, txt, font, x, y) {

    /// lets save current state as we make a lot of changes        
    ctx.save();

    /// set font
    ctx.font = font;

    /// draw text from top - makes life easier at the moment
    ctx.textBaseline = 'top';

    /// color for background
    ctx.fillStyle = '#f50';
    
    /// get width of text
    var width = ctx.measureText(txt).width;

    /// draw background rect assuming height of font
    ctx.fillRect(x, y, width, parseInt(font, 10));
    
    /// text color
    ctx.fillStyle = '#000';

    /// draw text on top
    ctx.fillText(txt, x, y);
    
    /// restore original state
    ctx.restore();
}

在此处在线演示

ONLINE DEMO HERE

请注意，这种测量方式不适用。高度不正确。您可以通过使用临时的div / span元素来测量字体的高度，并在为其设置字体和文本时从中获取计算出的样式。

Just note that this way of "measuring" height is not accurate. You can measure height of a font by using a temporary div/span element and get the calculated style from that when font and text is set for it.

这篇关于在背景上的画布上写文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！