Javascript HTML5 Canvas GlobalComposite操作打火机和源代码同时启动

是否有一种方法可以使用GlobalComposite操作“打火机”，同时使用源代码？（也称为打火机，但仅限于已绘制的部分。）

一次只能设置一个合成操作

解决方法：您可以使用第二块画布来进行“轻松”：

创建第二个内存画布

将主画布内容绘制到内存画布上

在内存画布上将合成设置为

变亮

在内存画布上绘制覆盖颜色/图像

在主画布上将合成设置为“源输入”

将内存画布绘制到主画布上

结果：轻量化和源合成的结合 左：原始红色矩形，中：蓝色填充，右：浅蓝色填充

示例代码和演示：

此示例仅使用实心填充进行照明，但您也可以选择

drawImage

而不是

fillRect

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var cw=画布宽度；
var ch=画布高度；
ctx.fillStyle='rgba（250,0,0255）'；
ctx.fillRect（50,50100,75）；
(rgba(0,0255255));；
功能（rgba）{
var compositor=document.createElement（'canvas'）；
var cctx=compositor.getContext（'2d'）；
合成器.width=canvas.width；
合成器.height=canvas.height；
cctx.drawImage（画布，0,0）；
cctx.globalCompositeOperation='lighter'；
cctx.fillStyle=rgba；
cctx.fillRect（0,0，cw，ch）；
ctx.globalCompositeOperation='source-in'；
ctx.drawImage（合成器，0,0）；
ctx.globalCompositeOperation='source-over'；
}

body{背景色：白色；}
#画布{边框：1px纯红；}

原来的红色矩形被蓝色矩形“照亮”