使用js绘制红色填充文字内容为“大爱和小爱”（见常量TEXT），字体大小为46（见常量TEXT_SIZE），文字位于右下方； // 3、“大爱和小爱”文字背后蓝色半透明矩形框,透明度为0.2，矩形中心在“大爱和小爱”文字的中心， // 矩形的宽度为文字宽度加2倍的MARGIN常量值，高度为文字大小加2倍的MARGIN值；

以下是我的回答：

可以使用以下代码实现：

// 定义常量
const TEXT = "大爱和小爱";
const TEXT_SIZE = 46;
const MARGIN = 10;

// 获取画布和上下文
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// 设置字体
ctx.font = `${TEXT_SIZE}px sans-serif`;

// 获取文字宽度和高度
const textWidth = ctx.measureText(TEXT).width;
const textHeight = TEXT_SIZE;

// 绘制文字
ctx.fillStyle = "red";
ctx.fillText(TEXT, canvas.width - textWidth - MARGIN, canvas.height - MARGIN);

// 绘制矩形框
ctx.fillStyle = "rgba(, , 255, .2)";
ctx.fillRect(canvas.width - textWidth - MARGIN - MARGIN, canvas.height - MARGIN - textHeight - MARGIN, textWidth + MARGIN * 2, textHeight + MARGIN * 2);

注意，以上代码中的 canvas 和 id 为 "canvas" 的元素需要在 HTML 中定义。

相关问题

使用js绘制红色填充文字内容为“大爱和小爱”（见常量TEXT），字体大小为46（见常量TEXT_SIZE），文字位于右下方； // 3、“大爱和小爱”文字背后蓝色半透明矩形框,透明度为0.2，矩形中心在“大爱和小爱”文字的中心， // 矩形的宽度为文字宽度加2倍的MARGIN常量值，高度为文字大小加2倍的MARGIN值；

以下是使用 JavaScript 绘制红色填充文字内容为“大爱和小爱”，字体大小为 46，文字位于右下方的代码：

const TEXT = "大爱和小爱";
const TEXT_SIZE = 46;
const MARGIN = 10;

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.font = `${TEXT_SIZE}px sans-serif`;
ctx.fillStyle = "red";
ctx.textAlign = "right";
ctx.textBaseline = "bottom";
ctx.fillText(TEXT, canvas.width - MARGIN, canvas.height - MARGIN);

const textWidth = ctx.measureText(TEXT).width;
const rectWidth = textWidth + 2 * MARGIN;
const rectHeight = TEXT_SIZE + 2 * MARGIN;
const rectX = canvas.width - textWidth / 2 - MARGIN;
const rectY = canvas.height - TEXT_SIZE / 2 - MARGIN;

ctx.fillStyle = "rgba(, , 255, .2)";
ctx.fillRect(rectX - rectWidth / 2, rectY - rectHeight / 2, rectWidth, rectHeight);

以上代码会在 id 为 canvas 的元素中绘制出红色填充文字内容为“大爱和小爱”，字体大小为 46，文字位于右下方，并且文字背后有蓝色半透明矩形框。矩形的宽度为文字宽度加 2 倍的 MARGIN 常量值，高度为文字大小加 2 倍的 MARGIN 值。

、绘制红色填充文字内容为“大爱和小爱”（见常量TEXT），字体大小为46（见常量TEXT_SIZE），文字位于右下方； // 3、“大爱和小爱”文字背后蓝色半透明矩形框,透明度为0.2，矩形中心在“大爱和小爱”文字的中心， // 矩形的宽度为文字宽度加2倍的MARGIN常量值，高度为文字大小加2倍的MARGIN值； // 4、效果请见demo1（图像）。

我可以回答这个问题。以下是绘制红色填充文字内容为“大爱和小爱”的代码：

#include <opencv2/opencv.hpp>

using namespace cv;

const char* TEXT = "大爱和小爱";
const int TEXT_SIZE = 46;
const int MARGIN = 10;

int main()
{
    Mat img(400, 600, CV_8UC3, Scalar(255, 255, 255));

    Point textOrg(img.cols - 2 * MARGIN, img.rows - MARGIN);
    putText(img, TEXT, textOrg, FONT_HERSHEY_SIMPLEX, TEXT_SIZE, Scalar(, , 255), 2);

    int rectWidth = getTextSize(TEXT, FONT_HERSHEY_SIMPLEX, TEXT_SIZE, 2, nullptr).width + 2 * MARGIN;
    int rectHeight = TEXT_SIZE + 2 * MARGIN;
    Point rectOrg(textOrg.x - rectWidth / 2, textOrg.y - rectHeight / 2);
    Rect rect(rectOrg.x, rectOrg.y, rectWidth, rectHeight);
    rectangle(img, rect, Scalar(255, , , 50), -1);

    imshow("demo1", img);
    waitKey();

    return ;
}

这段代码使用 OpenCV 库绘制了红色填充文字内容为“大爱和小爱”，字体大小为46，文字位于右下方。同时，还绘制了一个蓝色半透明矩形框，透明度为.2，矩形中心在“大爱和小爱”文字的中心，矩形的宽度为文字宽度加2倍的MARGIN常量值，高度为文字大小加2倍的MARGIN值。效果请见demo1（图像）。