引言：多边形阴影的重要性与应用场景
在计算机图形学、网页设计、游戏开发以及数据可视化中，多边形阴影的绘制是一个非常常见且重要的任务。阴影不仅能够增强视觉层次感，还能为物体添加深度和真实感。从简单的矩形投影到复杂的自定义多边形阴影，掌握这一技术对于任何图形开发者来说都是必不可少的。
本教程将从基础概念开始，逐步深入到高级技巧，并涵盖常见问题及其解决方案。我们将通过具体的代码示例（主要使用HTML5 Canvas和JavaScript）来演示如何实现各种多边形阴影效果。
第一部分：基础概念与准备工作
1.1 什么是多边形阴影？
多边形阴影是指在多边形形状下方或特定方向上绘制一个偏移的、半透明的填充区域，用以模拟光照产生的投影效果。基本的阴影通常包含以下属性：
- 偏移量 (Offset)：阴影相对于原多边形的位置偏移
- 模糊度 (Blur)：阴影边缘的清晰程度
- 颜色 (Color)：阴影的颜色，通常带有透明度
- 形状 (Shape)：通常与原多边形相同，但可以变形
1.2 开发环境准备
我们将使用HTML5 Canvas API进行演示，因为它是最直观且广泛支持的2D图形接口。你需要一个现代浏览器和一个文本编辑器。
创建一个基础的HTML文件结构：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多边形阴影绘制教程</title>
<style>
body { margin: 0; padding: 20px; background: #f0f0f0; display: flex; flex-direction: column; align-items: center; }
canvas { border: 1px solid #ccc; background: white; margin-bottom: 20px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.controls { margin: 10px 0; }
button { padding: 8px 16px; margin: 0 5px; cursor: pointer; background: #007bff; color: white; border: none; border-radius: 4px; }
button:hover { background: #0056b3; }
</style>
</head>
<body>
<h1>多边形阴影绘制演示</h1>
<div class="controls">
<button onclick="drawBasicShadow()">基础阴影</button>
<button onclick="drawBlurShadow()">模糊阴影</button>
<button onclick="drawComplexShape()">复杂形状</button>
<button onclick="drawInnerShadow()">内阴影</button>
</div>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
// 我们的JavaScript代码将在这里编写
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// 清空画布辅助函数
function clearCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
// 这里将放置具体的绘制函数...
</script>
</body>
</html>
1.3 Canvas 2D 上下文中的阴影属性
Canvas API 提供了直接设置阴影的属性，这是最简单的方法：
ctx.shadowColor: 设置阴影颜色（支持 rgba）ctx.shadowBlur: 设置模糊级别（数值越大越模糊）ctx.shadowOffsetX/ctx.shadowOffsetY: 设置阴影在 X 和 Y 轴的偏移量
第二部分：基础多边形阴影绘制
2.1 使用原生 Canvas 属性绘制简单阴影
这是最快的方法，适用于简单的、不需要复杂控制的阴影。Canvas 会自动将这些属性应用到所有后续绘制的图形上。
代码示例：绘制一个带阴影的三角形
function drawBasicShadow() {
clearCanvas();
// 1. 定义三角形顶点
const triangle = [
{ x: 100, y: 50 }, // 顶点1
{ x: 50, y: 150 }, // 顶点2
{ x: 150, y: 150 } // 顶点3
];
// 2. 设置阴影属性
ctx.shadowColor = "rgba(0, 0, 0, 0.5)"; // 半透明黑色
ctx.shadowBlur = 10; // 模糊半径 10px
ctx.shadowOffsetX = 5; // 向右偏移 5px
ctx.shadowOffsetY = 5; // 向下偏移 5px
// 3. 绘制多边形
ctx.beginPath();
ctx.moveTo(triangle[0].x, triangle[0].y);
ctx.lineTo(triangle[1].x, triangle[1].y);
ctx.lineTo(triangle[2].x, triangle[2].y);
ctx.closePath();
// 4. 填充多边形（阴影会自动应用）
ctx.fillStyle = "#3498db";
ctx.fill();
// 5. 重置阴影（重要！否则会影响后续绘制）
ctx.shadowColor = "transparent";
ctx.shadowBlur = 0;
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
}
详细解析：
- 我们首先定义了三角形的三个顶点坐标。
ctx.shadowColor = "rgba(0, 0, 0, 0.5)"设置了阴影颜色为黑色，透明度 50%。ctx.shadowBlur = 10让阴影边缘变得模糊，模拟真实的投影效果。ctx.shadowOffsetX和ctx.shadowOffsetY决定了阴影相对于图形的位置。这里设置为 (5, 5)，表示光源在左上方，阴影投射到右下方。- 使用
ctx.fill()填充三角形时，Canvas 引擎会自动根据设置的阴影属性绘制阴影。 - 关键步骤：绘制完成后，务必将阴影属性重置为 0 或 transparent，否则后续在画布上绘制的所有内容（包括文字、线条）都会带有这个阴影，导致画面混乱。
2.2 绘制矩形和任意多边形
同样的方法适用于任何形状。让我们看一个六边形的例子：
function drawHexagonShadow() {
clearCanvas();
const centerX = 400;
const centerY = 100;
const radius = 50;
const sides = 6;
// 设置阴影
ctx.shadowColor = "rgba(231, 76, 60, 0.6)";
ctx.shadowBlur = 15;
ctx.shadowOffsetX = 3;
ctx.shadowOffsetY = 8;
ctx.beginPath();
for (let i = 0; i < sides; i++) {
const angle = (i * 2 * Math.PI) / sides;
const x = centerX + radius * Math.cos(angle);
const y = centerY + radius * Math.sin(angle);
if (i === 0) ctx.moveTo(x, y);
else ctx.lineTo(x, y);
}
ctx.closePath();
ctx.fillStyle = "#e74c3c";
ctx.fill();
// 重置阴影
ctx.shadowColor = "transparent";
ctx.shadowBlur = 0;
}
第三部分：进阶技巧——自定义阴影绘制
原生 Canvas 阴影虽然方便，但控制力有限。例如，你无法轻易改变阴影的形状（让它比原图形大或小），也无法实现渐变阴影。在这一部分，我们将通过“手动绘制”阴影来实现更高级的效果。
3.1 偏移复制法（Offset Duplicate）
原理：不使用 shadowBlur，而是将原多边形复制一份，向特定方向偏移，填充不同的颜色和透明度，然后再绘制原图形。
优点：完全控制阴影的形状和位置。 缺点：代码量稍大，对于复杂模糊效果需要额外处理。
function drawOffsetShadow() {
clearCanvas();
// 定义一个五边形
const points = [
{x: 200, y: 50}, {x: 250, y: 30}, {x: 280, y: 80}, {x: 230, y: 120}, {x: 180, y: 90}
];
// 1. 绘制阴影（偏移的副本）
const offsetX = 10;
const offsetY = 10;
ctx.fillStyle = "rgba(0, 0, 0, 0.3)"; // 深灰色半透明
ctx.beginPath();
ctx.moveTo(points[0].x + offsetX, points[0].y + offsetY);
for (let i = 1; i < points.length; i++) {
ctx.lineTo(points[i].x + offsetX, points[i].y + offsetY);
}
ctx.closePath();
ctx.fill();
// 2. 绘制原图形（覆盖在阴影上）
ctx.fillStyle = "#2ecc71";
ctx.beginPath();
ctx.moveTo(points[0].x, points[0].y);
for (let i = 1; i < points.length; i++) {
ctx.lineTo(points[i].x, points[i].y);
}
ctx.closePath();
ctx.fill();
}
3.2 模拟高斯模糊（Stack Blur Algorithm）
Canvas 原生的 shadowBlur 性能较好，但有时我们需要对自定义路径应用模糊，或者在不支持 Canvas 的环境中实现模糊。手动实现高斯模糊非常复杂，但我们可以使用一种简单的“多次绘制叠加”法来模拟轻微的模糊，或者直接使用 Canvas 的 filter 属性（现代浏览器支持）。
现代方法：使用 CSS Filter 配合 Canvas
function drawBlurShadow() {
clearCanvas();
// 创建一个离屏 Canvas 或者直接在当前 Canvas 上利用 filter
// 注意：filter 会影响后续所有绘制，所以通常建议配合 save/restore 或者离屏 Canvas
ctx.save(); // 保存当前状态
// 设置滤镜：高斯模糊
ctx.filter = 'blur(5px)';
// 绘制阴影形状（这里我们画一个比原图形稍大的椭圆作为阴影）
ctx.fillStyle = "rgba(0, 0, 0, 0.4)";
ctx.beginPath();
ctx.ellipse(350, 250, 60, 30, 0, 0, 2 * Math.PI);
ctx.fill();
ctx.restore(); // 恢复状态，移除滤镜
// 绘制原图形
ctx.fillStyle = "#9b59b6";
ctx.beginPath();
ctx.ellipse(340, 240, 50, 25, 0, 0, 2 * Math.PI);
ctx.fill();
}
3.3 渐变阴影与不规则阴影
阴影不总是纯色的。靠近物体的阴影更暗、更清晰，远离物体的阴影更淡、更模糊。我们可以使用线性或径向渐变来模拟这种效果。
代码示例：带渐变的自定义阴影
function drawGradientShadow() {
clearCanvas();
// 定义一个梯形
const topWidth = 100;
const bottomWidth = 160;
const height = 80;
const startX = 300;
const startY = 300;
// 1. 创建渐变对象
// 我们希望阴影从左上角向右下角逐渐变淡
const gradient = ctx.createLinearGradient(
startX, startY,
startX + 50, startY + 50
);
gradient.addColorStop(0, "rgba(0,0,0,0.4)");
gradient.addColorStop(1, "rgba(0,0,0,0)");
// 2. 绘制阴影路径（这里我们手动绘制一个稍微变形的阴影）
ctx.fillStyle = gradient;
ctx.beginPath();
// 阴影起始点（偏移）
ctx.moveTo(startX + 10, startY + 10);
ctx.lineTo(startX + topWidth + 10, startY + 10);
// 底部两个点，稍微向外扩展，模拟透视
ctx.lineTo(startX + bottomWidth + 30, startY + height + 10);
ctx.lineTo(startX - 20 + 10, startY + height + 10);
ctx.closePath();
ctx.fill();
// 3. 绘制原梯形
ctx.fillStyle = "#f39c12";
ctx.beginPath();
ctx.moveTo(startX, startY);
ctx.lineTo(startX + topWidth, startY);
ctx.lineTo(startX + bottomWidth, startY + height);
ctx.lineTo(startX, startY + height);
ctx.closePath();
ctx.fill();
}
第四部分：复杂场景与性能优化
4.1 复杂多边形（凹多边形与孔洞）
处理复杂多边形（如星形、带孔的形状）时，Canvas 的 fill() 行为依赖于填充规则（nonzero 或 evenodd）。
ctx.fill('nonzero')(默认)：通过判断路径缠绕方向来决定填充区域。ctx.fill('evenodd')：通过计算路径交叉次数的奇偶性来决定填充区域。
带孔多边形阴影示例：
function drawHoleShadow() {
clearCanvas();
// 设置阴影
ctx.shadowColor = "rgba(0,0,0,0.5)";
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
// 外轮廓（顺时针）
ctx.beginPath();
ctx.rect(500, 300, 150, 100);
// 内轮廓（逆时针）- 形成孔洞
ctx.moveTo(530, 320);
ctx.lineTo(530, 380);
ctx.lineTo(570, 380);
ctx.lineTo(570, 320);
ctx.closePath();
ctx.fillStyle = "#34495e";
// 使用 nonzero 填充规则
ctx.fill('nonzero');
// 重置阴影
ctx.shadowColor = "transparent";
ctx.shadowBlur = 0;
}
4.2 性能优化：离屏 Canvas (Off-screen Canvas)
当阴影非常复杂（例如包含高斯模糊或大量路径计算）时，实时重绘会导致卡顿。优化方案是使用离屏 Canvas。
原理：
- 创建一个不在 DOM 中显示的 Canvas。
- 在离屏 Canvas 上绘制阴影。
- 将离屏 Canvas 的内容作为图像 (
drawImage) 绘制到主 Canvas 上。
代码示例：
function drawOptimizedShadow() {
clearCanvas();
// 1. 创建或获取离屏 Canvas
if (!window.offscreen) {
window.offscreen = document.createElement('canvas');
window.offscreen.width = 800;
window.offscreen.height = 600;
}
const offCtx = window.offscreen.getContext('2d');
// 2. 在离屏 Canvas 上绘制阴影（这里模拟一个复杂计算）
offCtx.clearRect(0, 0, 800, 600);
// 模拟：绘制一个复杂的模糊阴影
offCtx.shadowColor = "rgba(0,0,0,0.5)";
offCtx.shadowBlur = 20; // 假设这个计算很耗时
offCtx.shadowOffsetX = 10;
offCtx.shadowOffsetY = 10;
offCtx.fillStyle = "#e67e22";
offCtx.beginPath();
offCtx.arc(600, 450, 40, 0, Math.PI * 2);
offCtx.fill();
// 重置离屏 Canvas 的阴影设置，以免影响后续
offCtx.shadowColor = "transparent";
offCtx.shadowBlur = 0;
// 3. 将离屏 Canvas 的内容绘制到主 Canvas
// 参数：源图像，源x, 源y, 源宽, 源高 -> 目标x, 目标y, 目标宽, 目标高
ctx.drawImage(window.offscreen, 0, 0, 800, 600, 0, 0, 800, 600);
// 4. 绘制清晰的原图形（不需要离屏）
ctx.fillStyle = "#d35400";
ctx.beginPath();
ctx.arc(590, 440, 30, 0, Math.PI * 2);
ctx.fill();
}
第五部分：常见问题解析 (FAQ)
Q1: 为什么我的阴影只在画布的左上角显示，或者完全不显示？
原因分析：
- 坐标问题：如果你的多边形坐标是负数或超出了 Canvas 的可见范围，阴影也会偏移到不可见区域。
- 绘制顺序：Canvas 是基于状态的。如果你在绘制图形之后才设置
shadowColor，那么阴影不会生效。必须在fill()或stroke()之前设置。 - 透明度：如果阴影颜色的透明度为 0（例如
rgba(0,0,0,0)），阴影是不可见的。
解决方案：
- 检查多边形坐标是否在
(0, 0)到(width, height)范围内。 - 确保代码顺序为：
设置阴影 -> 定义路径 -> 填充/描边 -> 重置阴影。
Q2: 如何去除 Canvas 中已经设置的阴影？
原因分析：Canvas 的状态机（State Machine）会保留设置的属性，直到被修改。
解决方案： 有两种主要方法：
- 重置属性（推荐）：
ctx.shadowColor = "transparent"; ctx.shadowBlur = 0; ctx.shadowOffsetX = 0; ctx.shadowOffsetY = 0; - 使用
save()和restore()： Canvas 维护一个状态栈。ctx.save(); // 保存当前状态（包括阴影设置） // 设置阴影并绘制 ctx.shadowColor = "black"; ctx.shadowBlur = 10; ctx.fillRect(10, 10, 50, 50); ctx.restore(); // 恢复到 save() 时的状态，阴影设置被移除
Q3: shadowBlur 很大时性能很差怎么办？
原因分析：高斯模糊计算量大，尤其是当模糊半径很大时。
解决方案：
- 使用离屏 Canvas（如 4.2 节所述）。将模糊计算一次，然后作为位图复用。
- 降低模糊半径：在视觉可接受范围内减小
shadowBlur。 - 避免在动画循环中实时计算：如果阴影形状不变，预先渲染好阴影层。
Q4: 如何实现内阴影（Inset Shadow）？
原因分析：内阴影是指阴影位于图形内部，向内收缩。Canvas 原生 API 不直接支持内阴影。
解决方案：
通常需要使用 globalCompositeOperation（混合模式）或者复杂的路径裁剪。
最简单的视觉模拟方法是使用 globalCompositeOperation = 'source-atop'，但这通常用于遮罩。
对于简单的矩形内阴影，可以使用 CSS box-shadow: inset。对于 Canvas 复杂路径，通常需要：
- 绘制阴影（在原位置）。
- 绘制原图形（覆盖阴影）。
- 使用
ctx.clip()裁剪掉多余部分。
或者，使用 ctx.globalCompositeOperation = 'source-in' 配合绘制一个比原图形稍小的形状来模拟。
代码示例（模拟内阴影）：
function drawInnerShadow() {
clearCanvas();
const x = 600, y = 100, w = 100, h = 80;
// 1. 绘制外框（作为容器）
ctx.fillStyle = "#ecf0f1";
ctx.fillRect(x, y, w, h);
// 2. 设置混合模式：只在已有内容（外框）上绘制
ctx.globalCompositeOperation = 'source-atop';
// 3. 绘制向内偏移的黑色阴影
ctx.fillStyle = "rgba(0,0,0,0.5)";
ctx.shadowBlur = 5;
ctx.shadowOffsetX = -2; // 向左
ctx.shadowOffsetY = -2; // 向上
// 绘制一个覆盖整个区域的矩形，阴影会向内收缩
ctx.fillRect(x, y, w, h);
// 4. 恢复混合模式和阴影
ctx.globalCompositeOperation = 'source-over';
ctx.shadowBlur = 0;
ctx.shadowColor = "transparent";
}
结语
绘制多边形阴影从简单的 API 调用到复杂的自定义渲染，涵盖了图形编程的多个核心概念。掌握 ctx.shadow 属性是入门，理解手动偏移和渐变控制是进阶，而利用离屏 Canvas 和混合模式则是处理复杂场景的专家级技巧。
在实际项目中，请根据性能需求和视觉效果要求选择合适的方法。对于 UI 界面，CSS box-shadow 往往更高效；对于数据可视化或游戏，Canvas API 提供了无与伦比的灵活性。希望这篇教程能为你点亮图形编程的道路！