如何在网页中实现带填充的文字轮廓动态效果？

嘿，这个需求我之前也折腾过！你说的其实就是带描边+内部填充的文字效果，而且要动态变化的对吧？别担心，有几种靠谱的方法，我给你拆解下：

一、CSS 快速实现（适合简单动态效果） #

你一开始想到的text-stroke思路是对的，但它有个小坑：默认会让文字内部变成透明的，所以我们可以用分层文字的技巧来同时实现描边和内部填充，还能轻松加动态效果。

方法1：伪元素 + text-stroke #

用伪元素复制一层文字作为描边层，原文字作为填充层，这样就能分开控制两者的样式：

/* 基础样式 */
.fancy-text {
  position: relative;
  color: #ffffff; /* 内部填充色 */
  font-size: 72px;
  font-weight: 800;
}

/* 描边层：用伪元素生成和原文字一样的内容 */
.fancy-text::before {
  content: attr(data-text); /* 用data属性复用文字内容，避免重复写 */
  position: absolute;
  top: 0;
  left: 0;
  -webkit-text-stroke: 4px #ff6b6b; /* 描边宽度 + 颜色 */
  color: transparent; /* 让描边层内部透明，只显示描边 */
  z-index: -1; /* 把描边层放在原文字下面 */
}

如果要加动态效果，比如描边颜色脉冲变化，直接给伪元素加CSS动画就行：

@keyframes stroke-pulse {
  0% { -webkit-text-stroke-color: #ff6b6b; }
  50% { -webkit-text-stroke-color: #4ecdc4; }
  100% { -webkit-text-stroke-color: #ff6b6b; }
}

.fancy-text::before {
  animation: stroke-pulse 2.5s infinite ease-in-out;
}

使用的时候，HTML里只要给元素加data-text属性：

<h1 class="fancy-text" data-text="Dynamic Text">Dynamic Text</h1>

方法2：text-shadow 模拟描边（兼容性更好） #

如果要兼容老浏览器（比如 Firefox 早期版本），可以用多层text-shadow叠加出描边效果，不需要依赖text-stroke：

.shadow-stroke-text {
  color: #ffffff;
  font-size: 72px;
  font-weight: 800;
  /* 上下左右四个方向各加一层阴影，模拟描边 */
  text-shadow:
    3px 3px 0 #ff6b6b,
    -3px 3px 0 #ff6b6b,
    3px -3px 0 #ff6b6b,
    -3px -3px 0 #ff6b6b,
    0 3px 0 #ff6b6b,
    3px 0 0 #ff6b6b,
    0 -3px 0 #ff6b6b,
    -3px 0 0 #ff6b6b;
}

动态效果同样用CSS动画改变text-shadow的颜色就行，原理和上面一致。

二、Canvas API 实现（适合复杂动态/交互效果） #

如果你需要更灵活的动态效果（比如跟随鼠标改变描边宽度、文字路径变形、实时响应数据变化），Canvas 就是更好的选择。

下面是一个简单的示例：实时切换描边颜色，还能扩展成更复杂的交互：

// 获取画布和上下文
const canvas = document.getElementById('text-canvas');
const ctx = canvas.getContext('2d');

// 设置画布尺寸
canvas.width = window.innerWidth;
canvas.height = 300;

// 定义文字和样式参数
const textContent = "Hello Dynamic World";
const fillColor = "#ffffff";
const strokeColors = ["#ff6b6b", "#4ecdc4", "#ffe66d"];
let currentStrokeIndex = 0;

// 绘制带描边和填充的文字
function drawText() {
  // 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 设置文字样式
  ctx.font = "900 64px 'Arial', sans-serif";
  ctx.textAlign = "center";
  ctx.textBaseline = "middle";

  // 先描边，再填充（确保填充覆盖内部，描边在外侧）
  ctx.strokeStyle = strokeColors[currentStrokeIndex];
  ctx.lineWidth = 5;
  ctx.strokeText(textContent, canvas.width / 2, canvas.height / 2);

  ctx.fillStyle = fillColor;
  ctx.fillText(textContent, canvas.width / 2, canvas.height / 2);
}

// 初始绘制
drawText();

// 动态切换描边颜色（每2秒换一次）
setInterval(() => {
  currentStrokeIndex = (currentStrokeIndex + 1) % strokeColors.length;
  drawText();
}, 2000);

// 可选：监听窗口大小变化，自动适配画布
window.addEventListener('resize', () => {
  canvas.width = window.innerWidth;
  drawText();
});

对应的HTML只要加个画布元素：

<canvas id="text-canvas"></canvas>

小Tips #

• 如果只是颜色、描边宽度这类简单动态，优先用CSS，性能更好，代码也更简洁；
• 要是需要和用户交互（比如鼠标 hover 变化、跟随滚动变形），Canvas 能给你完全的控制权；
• text-stroke目前还是webkit内核的前缀属性，生产环境可以同时加-webkit-text-stroke和标准text-stroke来兼容更多浏览器。

内容来源于stack exchange