html - 在 Canvas 的裁剪区域外放置阴影

Question

我正在通过 Canvas 将图像剪裁成一个形状。现在我想在它外面添加一个阴影。我该怎么做？

var canvas1 = document.createElement("canvas");
var ctx = canvas1.getContext("2d");
var canvas1_img = new Image();
canvas1_img.src = "https://placeimg.com/300/300/nature";
canvas1_img.addEventListener("load", draw);

function draw() {
  var canvas_wd = canvas1.width;
  var canvas_ht = canvas1.height;
  var y1 = 20;
  var y2 = 130;

  ctx.beginPath();
  ctx.moveTo(0, y1);
  ctx.lineTo(0, y2);
  ctx.lineTo(canvas_wd, canvas_ht);
  ctx.lineTo(canvas_wd, 0);
  ctx.closePath();
  ctx.clip();

  ctx.drawImage(canvas1_img, 0, 0);
  document.body.appendChild(canvas1);
}

Answer 1

围绕 ctx.clip() 执行此操作:

ctx.shadowOffsetX = 2; // Sets the shadow offset x, positive number is right
ctx.shadowOffsetY = 2; // Sets the shadow offset y, positive number is down
ctx.shadowBlur = 4; // Sets the shadow blur size
ctx.shadowColor = 'rgba(0, 0, 0, 0.6)'; // Sets the shadow color
ctx.fillStyle = 'none';
ctx.fill();