如何解决JavaScript Canvas中圆角图片添加投影失效问题？

问题：加载网络图片后，单独设置圆角或阴影都能正常生效，但组合使用时阴影无法显示。

问题原因 #

当前代码逻辑是先设置阴影、绘制圆角路径后执行clip()，再绘制图片。但clip()会将后续绘制区域严格限制在圆角路径内部，而阴影是渲染在路径外部的，自然会被裁剪掉，因此看不到阴影效果。

修复方案 #

调整绘制顺序，先渲染出阴影，再通过裁剪限制图片显示区域，最后绘制图片覆盖底色：

// 加载图片并添加圆角和阴影
function addRoundedCornersWithShadow() {
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');

  const image = new Image();
  image.src = 'https://picsum.photos/200/300'; 

  image.onload = function() {
    canvas.width = image.width;
    canvas.height = image.height;

    const cornerRadius = 20;
    const shadowBlur = 20;
    const shadowOffsetX = 5;
    const shadowOffsetY = 5;

    // 1. 先绘制带阴影的圆角矩形，触发阴影渲染
    ctx.shadowBlur = shadowBlur;
    ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
    ctx.shadowOffsetX = shadowOffsetX;
    ctx.shadowOffsetY = shadowOffsetY;
    
    // 绘制圆角矩形路径
    ctx.beginPath();
    ctx.moveTo(cornerRadius, 0);
    ctx.lineTo(canvas.width - cornerRadius, 0);
    ctx.arcTo(canvas.width, 0, canvas.width, cornerRadius, cornerRadius);
    ctx.lineTo(canvas.width, canvas.height - cornerRadius);
    ctx.arcTo(canvas.width, canvas.height, canvas.width - cornerRadius, canvas.height, cornerRadius);
    ctx.lineTo(cornerRadius, canvas.height);
    ctx.arcTo(0, canvas.height, 0, canvas.height - cornerRadius, cornerRadius);
    ctx.lineTo(0, cornerRadius);
    ctx.arcTo(0, 0, cornerRadius, 0, cornerRadius);
    ctx.closePath();
    
    // 填充矩形（填充色会被后续图片覆盖，可随意设置）
    ctx.fillStyle = '#ffffff';
    ctx.fill();

    // 2. 设置裁剪区域，让图片只在圆角内显示
    ctx.clip();

    // 3. 绘制图片，覆盖之前的填充矩形
    ctx.drawImage(image, 0, 0, canvas.width, canvas.height);

    // 清除阴影参数，避免影响后续画布操作
    ctx.shadowBlur = 0;
    ctx.shadowOffsetX = 0;
    ctx.shadowOffsetY = 0;
  };
}

addRoundedCornersWithShadow();

关键调整点 #

• 先绘制带阴影的圆角矩形：填充操作会让阴影渲染到画布上，这部分不受后续裁剪影响
• 再执行clip()：将图片的显示范围限制在圆角路径内
• 最后绘制图片：覆盖填充的矩形，只保留外部的阴影效果

内容的提问来源于stack exchange，提问作者hendrikschneider