canvas 正片叠底

在canvas中使用正片叠底效果可以通过globalCompositeOperation属性来实现。正片叠底是一种将两个图层混合的方法，其中混合后的颜色是通过将每个像素的颜色值乘以底层像素的颜色值，然后除以255而得到的。

以下是一个使用正片叠底效果的canvas示例代码：

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

// 绘制背景图像
var bgImage = new Image();
bgImage.src = 'background.jpg';
bgImage.onload = function() {
  context.drawImage(bgImage, 0, 0, canvas.width, canvas.height);
};

// 绘制前景图像
var fgImage = new Image();
fgImage.src = 'foreground.png';
fgImage.onload = function() {
  context.globalCompositeOperation = 'multiply';
  context.drawImage(fgImage, 0, 0, canvas.width, canvas.height);
};

在这个示例中，我们首先使用drawImage()方法绘制了背景图像，然后在前景图像加载完成后，将globalCompositeOperation属性设置为'multiply'，这将启用正片叠底效果。最后，我们使用drawImage()方法绘制了前景图像，覆盖在背景图像上，并且通过正片叠底效果将它们混合在一起。