写在帆布的文本有背景

Question

是否可以在画布上写图像并用背景写文字？例如这样:

Answer 1

文本如何在画布中工作

不幸的是,你不能用文本方法生成带背景的文本 - 只填充或勾勒文本本身.

这是因为字体(字体)中的字形会根据需要转换为单独的形状或路径,其中背景将是字形本身的内部部分(使用填充时看到的部分).除了使用其几何位置之外,字形没有用于黑盒子(字形适合的矩形)的层,所以我们需要自己提供一种黑盒子和轴承.

在旧的计算机系统上大多数字体,其中二进制字体,其中设置或清除像素.而不是仅仅清除背景可以选择提供背景.默认情况下,基于矢量的字体不是这种情况(浏览器可以直接访问字形几何体,因此可以通过这种方式提供背景).

创建自定义背景

要创建背景,您需要先使用其他方法(如形状或图像)绘制背景.

例子:

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

要么

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

然后在上面绘制文字:

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

你可以measureText用来找出文本的宽度(将来也是高度:上升+下降)并以此为基础:

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

您可以将所有这些包装在一个函数中.这里的函数是基本的,但您可以使用颜色和背景参数以及填充等扩展它.

/// 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元素测量字体的高度,并从为其设置字体和文本时获取计算出的样式.

Answer 2

我更简单的解决方案是调用 fillText 两次。首先是一串 Unicode+2588 ？这是一个黑色矩形，重复与使用背景颜色的文本相同的长度。然后使用前景色正常调用 fillText 。