Canvas 画布中圆形图像上的外部阴影？_Canvas

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

canvas

Canvas 画布中圆形图像上的外部阴影？,canvas,Canvas,如果我将这样的图像四舍五入： context.beginPath(); context.arc(25, 25, 25, 0, Math.PI * 2, true); context.closePath(); context.clip(); context.drawImage("image_here", 0, 0, 50, 50); 如何在不剪裁的情况下将外部阴影添加到圆形图像中？使用画布中内置的阴影方法 let canvas=d

如果我将这样的图像四舍五入：

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

    context.drawImage("image_here", 0, 0, 50, 50);

如何在不剪裁的情况下将外部阴影添加到圆形图像中？

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

let canvas=document.getElementById（“canvas”）；
让context=canvas.getContext（“2d”）；
画布宽度=500；
高度=500；
设image1=新图像（）；
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=“黑色”；
context.shadowOffsetX=5；
context.shadowBlur=8；
arc（50,50,25,0，Math.PI*2，true）；
context.fill（）；
closePath（）；
clip（）；
背景。drawImage（图像1、25、25、50、50）