javascript - HTML5 Canvas 图像上的嵌入阴影

Question

我以前见过这个问题，但给出的答案是针对通过路径绘制的 Canvas 图像的，但是，我正在绘制图像。

是否可以创建一个inset-shadow？

context.shadowOffsetX = 0;
context.shadowOffsetY = 0;
context.shadowBlur = 10;
context.shadowColor = 'rgba(30,30,30, 0.4)';

var imgOne = new Image();
imgOne.onload = function() {
    context.drawImage(imgOne, 0, 0);
};
imgOne.src = "./public/circle.png";

于是我画上圆圈图。我现在在圆圈外面有一个轻微的阴影，我怎样才能得到这个 inset 而不是 offset？

Answer 1

合成链

使用一系列的合成+绘制操作来获得嵌入阴影。

注意:该解决方案在创建时需要对 Canvas 元素的独占访问权，因此要么在屏幕外的 Canvas 上执行此操作并绘制回主画面，要么如果可能，计划在生成后绘制辅助图形。

所需步骤:

• 绘制原图
• 使用 xor 组合反转 alpha channel 填充 Canvas
• 定义阴影并将其自身拉回
• 停用阴影并绘制原始图像(destination-atop)

var ctx = c.getContext("2d"), img = new Image;
img.onload = function() {

  // draw in image to main canvas
  ctx.drawImage(this, 0, 0);

  // invert alpha channel
  ctx.globalCompositeOperation = "xor";
  ctx.fillRect(0, 0, c.width, c.height);

  // draw itself again using drop-shadow filter
  ctx.shadowBlur = 7*2;  // use double of what is in CSS filter (Chrome x4)
  ctx.shadowOffsetX = ctx.shadowOffsetY = 5;
  ctx.shadowColor = "#000";
  ctx.drawImage(c, 0, 0);

  // draw original image with background mixed on top
  ctx.globalCompositeOperation = "destination-atop";
  ctx.shadowColor = "transparent";                  // remove shadow !
  ctx.drawImage(this, 0, 0);
}
img.src = "http://i.imgur.com/Qrfga2b.png";

<canvas id=c height=300></canvas>