HTML canvas shadowBlur 属性（建议收藏）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战(已更新的所有项目都能学习) / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新开坑项目:《Spring AI 项目实战》 正在持续爆肝中，基于 Spring AI + Spring Boot 3.x + JDK 21...， 点击查看 ;
• 《从零手撸：仿小红书（微服务架构）》 已完结，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;演示链接： http://116.62.199.48:7070 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

前言

在网页开发中，HTML Canvas 是一个功能强大的画布元素，允许开发者通过 JavaScript 直接绘制图形、动画和交互式效果。而 shadowBlur 属性作为 Canvas 的阴影配置选项之一，能够为图形添加模糊效果，让视觉呈现更具层次感和真实感。无论是设计游戏特效、动态图表，还是创建艺术化界面，掌握 shadowBlur 属性的使用都至关重要。本文将从基础到进阶，结合代码示例和生动比喻，帮助读者全面理解这一属性的功能与应用场景。

基础概念：Canvas 阴影的四大支柱

在深入 shadowBlur 属性之前，我们需要先了解 Canvas 阴影的四大核心属性，它们共同决定了阴影的最终效果：

这四个属性需要协同工作才能生成可见的阴影效果。例如，即使设置了 shadowBlur 的值，若未指定 shadowColor 或 shadowOffset，阴影将不可见。

shadowBlur 属性详解：模糊半径的魔法

1. 属性语法与数值范围

shadowBlur 属性接受一个非负数值作为参数，表示阴影的模糊半径。数值越大，阴影边缘越柔和，模糊范围越广。其语法如下：

context.shadowBlur = value; // value 为 >=0 的数字  

当 value 为 0 时，阴影将呈现清晰的硬边效果；当 value 增大时，模糊效果逐渐增强。例如，shadowBlur = 10 会生成比 shadowBlur = 5 更柔和的阴影。

2. 模糊半径的视觉效果比喻

想象 shadowBlur 像是给阴影“涂抹了一层毛玻璃”——数值越大，玻璃越厚，边缘越模糊。例如：

• 数值 0：如同未涂抹玻璃，边缘锐利如刀切；
• 数值 10：玻璃薄而透，边缘微微晕染；
• 数值 30：玻璃厚重，阴影与背景几乎融为一体。

3. 属性作用范围与重置技巧

shadowBlur 的设置仅影响其后的绘图命令，且作用范围是全局性的（即同一 context 内所有图形共享当前阴影配置）。若需重置阴影效果，可将属性值设为 0：

// 重置阴影  
context.shadowBlur = 0;  

实战案例：从简单到复杂的应用场景

案例 1：基础矩形阴影

以下代码演示如何为矩形添加带模糊效果的阴影：

const canvas = document.getElementById('myCanvas');  
const context = canvas.getContext('2d');  

// 设置阴影属性  
context.shadowColor = 'rgba(0, 0, 0, 0.5)';  
context.shadowOffsetX = 10;  
context.shadowOffsetY = 10;  
context.shadowBlur = 15;  

// 绘制矩形  
context.fillStyle = 'white';  
context.fillRect(50, 50, 100, 100);  

效果解析：

• 阴影颜色为半透明黑色，向右下方偏移 10px，模糊半径为 15，最终呈现柔和的投影效果。

案例 2：动态模糊交互

通过滑块实时调整 shadowBlur 值，可让用户直观感受模糊效果的变化：

<input type="range" min="0" max="50" value="0" id="blurSlider">  
<canvas id="dynamicCanvas"></canvas>  

<script>  
  const canvas = document.getElementById('dynamicCanvas');  
  const context = canvas.getContext('2d');  
  const slider = document.getElementById('blurSlider');  

  function draw() {  
    context.clearRect(0, 0, canvas.width, canvas.height);  
    context.shadowColor = '#333';  
    context.shadowOffsetX = 20;  
    context.shadowOffsetY = 20;  
    context.shadowBlur = parseInt(slider.value);  

    context.fillStyle = '#f00';  
    context.beginPath();  
    context.arc(100, 100, 50, 0, Math.PI * 2);  
    context.fill();  
  }  

  slider.addEventListener('input', draw);  
  draw();  
</script>  

效果：拖动滑块时，圆形阴影的模糊程度实时变化，数值 0 时阴影清晰，数值 50 时几乎看不到边缘。

案例 3：复杂图形的分层阴影

通过多层阴影叠加，可创建立体感更强的效果：

context.shadowColor = 'rgba(0, 0, 0, 0.3)';  
context.shadowOffsetX = 8;  
context.shadowOffsetY = 8;  
context.shadowBlur = 8;  
context.fillRect(50, 50, 150, 100);  

// 改变属性值，叠加第二层阴影  
context.shadowColor = 'rgba(0, 0, 0, 0.1)';  
context.shadowBlur = 25;  
context.fillRect(50, 50, 150, 100);  

技巧：通过调整不同阴影层的透明度和模糊值，可模拟光线在复杂表面的反射效果。

进阶技巧：优化阴影性能与兼容性

1. 性能优化

• 合理设置数值范围：过大的 shadowBlur（如超过 50）可能导致性能下降，尤其在移动设备上。
• 分层绘制：将复杂图形拆分为多个 Canvas 层，仅对需要阴影的部分应用模糊效果。

2. 兼容性处理

虽然现代浏览器普遍支持 shadowBlur，但在旧版 IE 中可能失效。可通过条件判断回退到无阴影模式：

if (typeof context.shadowBlur === 'number') {  
  // 正常应用阴影配置  
} else {  
  // 移除阴影相关代码  
}  

常见问题与解决方案

Q1：阴影不显示，可能的原因是什么？

• 忘记设置 shadowColor：颜色透明时阴影不可见。
• 未设置偏移量：shadowOffsetX/Y 为 0 时，阴影与图形重叠，可能被覆盖。
• 绘图顺序问题：需先设置阴影属性，再调用绘图方法。

Q2：如何让阴影随图形移动？

将阴影配置与图形的坐标绑定到同一个变量，例如：

let x = 100;  
context.shadowOffsetX = x * 0.2; // 阴影偏移随 x 坐标变化  
context.shadowBlur = (x / 100) * 15; // 模糊值动态调整  

结论

HTML canvas shadowBlur 属性 是增强视觉表现力的利器，通过控制模糊半径，开发者可以赋予网页元素更细腻的光影效果。从基础的矩形阴影到动态交互场景，这一属性的灵活性和实用性不言而喻。建议读者通过实践逐步探索不同数值与属性组合的效果，并结合性能优化策略，最终实现既美观又高效的交互设计。掌握 shadowBlur，不仅是技术能力的提升，更是对视觉设计逻辑的深刻理解。