javascript - HTML5 Canvas globalCompositeOperation 更轻，同时在源码之上

Question

有没有一种方法可以“更轻量”地使用 globalCompositeOperation，同时使用 source-atop？ (又名打火机，但仅限于已经绘制了一些东西的地方。)

Answer 1

一次只能设置一项合成操作。

解决方法:您可以使用第二个 Canvas 来执行“lightenAtop”:

1. 创建第二个内存 Canvas 。
2. 将主 Canvas 内容绘制到内存 Canvas 上。
3. 将内存 Canvas 上的合成设置为变亮
4. 将叠加颜色/图像绘制到内存 Canvas 上
5. 在主 Canvas 上将合成设置为“source-in”。
6. 将内存 Canvas 绘制到主 Canvas 上。
7. 结果:光照与源顶合成的组合!

左:原始红色矩形，中:蓝色填充，右:lightenAtop

示例代码和演示:

此示例只是通过实心填充来减轻亮度，但您也可以使用 drawImage 而不是 fillRect

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

ctx.fillStyle='rgba(250,0,0,255)';
ctx.fillRect(50,50,100,75);

lightenAtop('rgba(0,0,255,255)');

function lightenAtop(rgba){
  var compositor=document.createElement('canvas');
  var cctx=compositor.getContext('2d');
  compositor.width=canvas.width;
  compositor.height=canvas.height;
  cctx.drawImage(canvas,0,0);
  cctx.globalCompositeOperation='lighter';
  cctx.fillStyle=rgba;
  cctx.fillRect(0,0,cw,ch);
  ctx.globalCompositeOperation='source-in';
  ctx.drawImage(compositor,0,0);
  ctx.globalCompositeOperation='source-over';
}

body{ background-color:white; }
#canvas{border:1px solid red;}

<h4>Original red rect "lightened" with blue rect</h4>
<canvas id="canvas" width=300 height=300></canvas>