使用js// 1、设置canvas的宽度和高度与背景图像(images/ex1.jpg)相同; // 2、绘制红色填充文字内容为“大爱和小爱”(见常量TEXT),字体大小为46(见常量TEXT_SIZE),文字位于右下方; // 3、“大爱和小爱”文字背后蓝色半透明矩形框,透明度为0.2,矩形中心在“大爱和小爱”文字的中心, // 矩形的宽度为文字宽度加2倍的MARGIN常量值,高度为文字大小加2倍的MARGIN值;
时间: 2023-03-30 13:01:35 浏览: 74
我可以回答这个问题。以下是代码:
const TEXT = "大爱和小爱";
const TEXT_SIZE = 46;
const MARGIN = 10;
const canvas = document.createElement("canvas");
canvas.width = 800;
canvas.height = 533;
document.body.appendChild(canvas);
const ctx = canvas.getContext("2d");
const img = new Image();
img.src = "images/ex1.jpg";
img.onload = function() {
ctx.drawImage(img, , , canvas.width, canvas.height);
ctx.font = `${TEXT_SIZE}px Arial`;
const textWidth = ctx.measureText(TEXT).width;
const textHeight = TEXT_SIZE;
ctx.fillStyle = "rgba(, , 255, .2)";
ctx.fillRect(
canvas.width - textWidth - MARGIN * 2,
canvas.height - textHeight - MARGIN * 2,
textWidth + MARGIN * 2,
textHeight + MARGIN * 2
);
ctx.fillStyle = "red";
ctx.fillText(
TEXT,
canvas.width - textWidth - MARGIN,
canvas.height - MARGIN
);
};