以下是一个简单的示例，演示了如何使用 globalCompositeOperation 属性：
Page({
onReady: function () {
const ctx = wx.createCanvasContext('myCanvas');
// 绘制一个红色矩形
ctx.setFillStyle('red');
ctx.fillRect(20, 20, 150, 100);
// 设置 globalCompositeOperation 属性
ctx.setGlobalCompositeOperation('destination-over');
// 绘制一个蓝色圆形，位于红色矩形下方
ctx.setFillStyle('blue');
ctx.beginPath();
ctx.arc(120, 70, 50, 0, 2 * Math.PI);
ctx.fill();
ctx.closePath();
// 绘制到 canvas 上
ctx.draw();
}
});
在这个示例中，我们首先使用 setFillStyle 和 fillRect 绘制了一个红色的矩形。然后，使用 setGlobalCompositeOperation 设置了 destination-over，这表示新绘制的内容会在已有内容下方绘制。最后，通过 setFillStyle、beginPath、arc、fill 绘制了一个蓝色的圆形，它位于红色矩形的下方。
globalCompositeOperation 还支持其他的合成操作，例如：
- source-over（默认值）：新绘制的内容在已有内容上方绘制。
- source-in：新绘制的内容仅在已有内容的非透明部分绘制。
- source-out：新绘制的内容仅在已有内容的透明部分绘制。
- source-atop：新绘制的内容会覆盖已有内容，但只在非透明部分绘制。
- destination-over：新绘制的内容在已有内容下方绘制。
你可以根据需要选择不同的合成操作。
转载请注明出处：http://www.zyzy.cn/article/detail/1010/微信小程序