fabric画布透明色

转载

网络小墨舞风 2024-09-27 19:05:18

canvas的globalCompositeOperation属性

在开发过程中遇到过类似刮刮卡的效果，就是涂抹时变透明，显示出下方的内容，做法思路简单说一下问题和解决方案；

分为2层，最下面一层是内容，比如‘一等奖’，上面一层用一个canvas遮挡住，画布本来是透明的，那必须给整个画布颜色

ctx.fillStyle = '#27293D'

ctx.fillRect(0,0,1800,460)

那么如何做到中间部分透明呢？

如果用清除画布内容是可以清除掉部分填充色的，但是这个清除是矩形的，不规则的做不到，所以不能用

ctx.clearRect()去清除画布

那么可以在整个画布里再画一个任意形状的，填充颜色，此时被颜色部分是我们想要的变透明的部分，直接设rgb的透明值是没有用的，

因为整个画布的颜色在这个画布的下方，所以需要用到canvas一个关键属性：

globalCompositeOperation

我们期望的是重叠的地方变透明就好，这个属性中的一个就能办到，在绘制后写上

ctx.globalCompositeOperation="destination-over";

ctx.globalCompositeOperation="xor";

即可以办到重叠的地方透明，非常好用，

定义和用法

globalCompositeOperation 属性设置或返回如何将一个源（新的）图像绘制到目标（已有）的图像上。

源图像 = 您打算放置到画布上的绘图。

目标图像 = 您已经放置在画布上的绘图。

默认值：	source-over
JavaScript 语法：	context.globalCompositeOperation="source-in";

source-over	默认。在目标图像上显示源图像。
source-atop	在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。
source-in	在目标图像中显示源图像。只有目标图像内的源图像部分会显示，目标图像是透明的。
source-out	在目标图像之外显示源图像。只会显示目标图像之外源图像部分，目标图像是透明的。
destination-over	在源图像上方显示目标图像。
destination-atop	在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示。
destination-in	在源图像中显示目标图像。只有源图像内的目标图像部分会被显示，源图像是透明的。
destination-out	在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。
lighter	显示源图像 + 目标图像。
copy	显示源图像。忽略目标图像。
xor	使用异或操作对源图像与目标图像进行组合。