使用js// 1、设置canvas的宽度和高度与背景图像(images/ex1.jpg)相同； // 2、绘制红色填充文字内容为“大爱和小爱”（见常量TEXT），字体大小为46（见常量TEXT_SIZE），文字位于右下方； // 3、“大爱和小爱”文字背后蓝色半透明矩形框,透明度为0.2，矩形中心在“大爱和小爱”文字的中心， // 矩形的宽度为文字宽度加2倍的MARGIN常量值，高度为文字大小加2倍的MARGIN值； // 4、效果请见demo1（图像）。

我可以回答这个问题。以下是代码实现：

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const TEXT = '大爱和小爱';
const TEXT_SIZE = 46;
const MARGIN = 10;

const img = new Image();
img.src = 'images/ex1.jpg';
img.onload = function() {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, , );

ctx.fillStyle = 'red';
ctx.font = `${TEXT_SIZE}px Arial`;
const textWidth = ctx.measureText(TEXT).width;
ctx.fillText(TEXT, canvas.width - textWidth - MARGIN, canvas.height - MARGIN);

const rectWidth = textWidth + MARGIN * 2;
const rectHeight = TEXT_SIZE + MARGIN * 2;
const rectX = canvas.width - textWidth - MARGIN * 2;
const rectY = canvas.height - TEXT_SIZE - MARGIN * 2;
ctx.fillStyle = 'rgba(, , 255, .2)';
ctx.fillRect(rectX, rectY, rectWidth, rectHeight);
};

document.body.appendChild(canvas);

效果请见demo1（图像）。