使用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 值。