画布上圆形图像的外部阴影

Question

如果我像这样舍入图像：

context.beginPath();
context.arc(25, 25, 25, 0, Math.PI * 2, true);
context.closePath();
context.clip();
context.drawImage("image_here", 0, 0, 50, 50);

然后，如何在不剪裁的情况下为圆形图像添加外部阴影？

Answer 1

使用画布中内置的阴影方法

let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");
canvas.width = 500;
canvas.height = 500;
let image1 = new Image();
image1.src = "https://images.unsplash.com/photo-1556103255-4443dbae8e5a?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8cGhvdG9ncmFwaGVyfGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&w=1000&q=80";

context.beginPath();
context.shadowColor = "black";
context.shadowOffsetX = 5;
context.shadowBlur = 8;
context.arc(50, 50, 25, 0, Math.PI * 2, true);
context.fill();
context.closePath();
context.clip();
context.drawImage(image1, 25, 25, 50, 50);

<canvas id="canvas"></canvas>