在带有背景的画布上书写文本

2022-01-17 00:00:00 text canvas html html5-canvas

是否可以在画布上写图像并用背景写文本?比如这样:

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();
}

在线演示

请注意，这种测量"方式高度不准确.您可以使用临时 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.

相关文章