我正试图通过在 WebGL 纹理上使用 canvas 模糊的阴影。
当有阴影重叠时，结果太暗。我尝试使用 globalCompositeOperation 但似乎并没有产生预期的效果。
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width="300" height="300"></canvas>
<script>
var c = document.getElementById("canvas");
var cW = c.width, sB = 10;
var cR = 50, cD = 2*cR, cX = -cR, cY = 100;
var bW = 140, bH = 140, bX = -bW, bY = 120;
var ctx = c.getContext("2d");
ctx.globalAlpha = 0.2;
ctx.globalCompositeOperation = "xor";
ctx.shadowColor = "#000000";
ctx.fillStyle= "#000000";
ctx.shadowBlur = sB;
ctx.shadowOffsetX = cD + 0.5*(cW-cD);
ctx.beginPath();
ctx.arc(cX, cY, cR, 0, 2*Math.PI, false);
ctx.fill();
ctx.shadowOffsetX = bW + 0.5*(cW-bW);
ctx.fillRect(bX, bY, bW, bH);
</script>
</body>
</html>我需要避免暗部阴影重叠。有没有一个 globalCompositeOperation type 来获得我想要的东西？我对其他解决方案也持开放态度。有没有办法把我的简单路径组合成一个，然后把结果画成的 path 一次？
我会自己画阴影......。
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width="300" height="160"></canvas>
<script>
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
function drawObject(x, y, base_color, shadow_color, offset) {
ctx.beginPath();
ctx.filter = 'blur(1px)'
ctx.fillStyle = shadow_color;
ctx.arc(x-offset, y-offset, 25, 0, 2 * Math.PI);
ctx.fillRect(x-offset-30, y-offset, 60, 60);
ctx.fill();
ctx.beginPath();
ctx.filter = 'none'
ctx.fillStyle = base_color;
ctx.arc(x, y, 25, 0, 2 * Math.PI);
ctx.fillRect(x-30, y, 60, 60);
ctx.fill();
}
drawObject( 80, 80, "#FF0000", "#E6E4E7", 30)
drawObject(170, 40, "#00FF00", "#CBCACB", 10)
drawObject(240, 60, "#0000FF", "#A6A5A6", -20)
</script>
</body>
</html>影子最基本的形式就是同一个 "对象 "在不同的位置上。