canvas 底图和背景色正片叠底

正片叠底是一种图像混合模式，它将两个图像进行混合，使它们的颜色相乘。如果您想在 Canvas 上使用正片叠底混合模式，可以使用 `globalCompositeOperation` 属性来设置。例如，您可以使用以下代码将底图和背景色设置为正片叠底混合模式：

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

// 绘制底图
var bgImage = new Image();
bgImage.onload = function() {
  ctx.drawImage(bgImage, 0, 0);
};

bgImage.src = "background.png";

// 设置背景色为红色
ctx.fillStyle = "red";
ctx.fillRect(0, 0, canvas.width, canvas.height);

// 将混合模式设置为正片叠底
ctx.globalCompositeOperation = "multiply";

// 绘制图像
var image = new Image();
image.onload = function() {
  ctx.drawImage(image, 0, 0);
};

image.src = "image.png";

在上面的代码中，我们首先绘制了底图，并使用 `fillRect` 方法将背景色设置为红色。然后，我们将混合模式设置为正片叠底，并绘制了一张图像。最终，我们将得到一个底图和图像相乘的结果，并与红色背景色混合的 Canvas。