Question

我想获得“闪光灯/闪光灯”的效果。但具有合并多种效果的功能。

我这样画一个效果，但是不能合并它们。

function createCircle( x, y ) {
    var gradient = context.createRadialGradient(x, y, 0, x, y, 100);
    gradient.addColorStop(0, 'rgba(0, 0, 0, 0)');
    gradient.addColorStop(1, 'rgba(0, 0, 0, 1)');
    context.fillStyle = gradient;
    context.fillRect(0, 0, width, height);
}

我尝试了不同类型的“ globalCompositeOperation”。但是结果仍然很糟糕。

我附加了具有期望结果的图像（example）。

Answer 1

这是您需要的吗？我已经按照您的意愿使用了globalCompositeOperation。请看看这个codepen example

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let cw = canvas.width = 600,
  cx = cw / 2;
let ch = canvas.height = 300,
  cy = ch / 2;
let img = document.getElementById("img");

function grd( x, y ) {
    let gradient = ctx.createRadialGradient(x, y, 0, x, y, 130);
    gradient.addColorStop(.5, 'rgba(0, 0, 0, 1)');
    gradient.addColorStop(1, 'rgba(0, 0, 0, 0)');
    return gradient;
}

let c1={x:220,y:150}
let c2={x:380,y:150}

ctx.fillStyle = grd(c1.x,c1.y);
ctx.beginPath();
    ctx.arc(c1.x, c1.y, 220, 0, 2*Math.PI);
    ctx.fill();
ctx.fillStyle = grd(c2.x,c2.y);
ctx.beginPath();
    ctx.arc(c2.x,c2.y, 220, 0, 2*Math.PI);
    ctx.fill();

ctx.globalCompositeOperation = "source-in";
ctx.drawImage( img, -50, -50 ,cw, cw );

body {

  overflow: hidden;
}
canvas {
  background-color: #000;
  display: block;

}

<canvas id="canvas">
  <img src="your_image.jpg" id="img" />
</canvas>

画布-渐变闪光和遮罩

1 个答案: