Web特效022—Web特效的定义与边界为什么看着还很假：颜色、材质与层次怎么补

本文讨论为什么有些 Web 特效虽然运动正常，却始终显得单薄、发平或像塑料。文章将从颜色的明暗与饱和度、材质的高光与粗糙度、前后层次的遮挡与透明关系入手，把“真实感”拆成可以观察和调整的具体参数，再结合 Canvas 2D、渐变、阴影、混合和纹理代码，说明如何用较低成本补足画面的体积、距离和材质差异。重点不是追求复杂的物理渲染，而是建立一套能服务于网页交互、粒子效果和界面动效的视觉判断方法。

请添加图片描述

一、先找出“假”的来源：颜色、材质和层次分别缺了什么

一个 Web 特效看起来“假”，通常不是因为少了某一个高级 API，而是颜色、材质和层次中的某个线索不一致。颜色负责区分明暗和体积，材质负责说明表面如何反射光，层次负责说明谁在前、谁在后。排查时应先把三个问题拆开，不要一上来同时调整颜色、阴影和透明度。

1. 先用现象判断缺少哪类线索

可以先把常见现象和可能原因对应起来：

颜色发平、没有体积 → 明暗对比不足
所有物体像同一种塑料 → 高光和纹理没有区别
元素互相粘在一起 → 遮挡、阴影或透明层次不足
边缘像贴纸 → 透明边缘、阴影方向或颜色过渡不连续

用数据表示一个最小视觉对象：

const visualObject = {
baseColor: { r: 80, g: 170, b: 255 },
brightness: 1,
roughness: 0.5,
alpha: 1,
depth: 0,
};

console.log(visualObject);

baseColor 使用 0～255 的 RGB，brightness 是颜色亮度系数，roughness 表示表面粗糙程度，alpha 是 0～1，depth 是绘制层级或空间深度。这个对象还没有产生真实光照，但它把“颜色、材质、层次”变成了可以单独检查的字段。

2. 颜色发平时，先检查明暗对比

如果前景和背景亮度接近，轮廓即使存在，眼睛也很难感受到体积。可以用相对亮度做一个粗略检查：

function luminance(color) {
return 0.2126 * color.r
+ 0.7152 * color.g
+ 0.0722 * color.b;
}

function contrastRatio(colorA, colorB) {
const light = Math.max(luminance(colorA), luminance(colorB));
const dark = Math.min(luminance(colorA), luminance(colorB));
return (light + 5) / (dark + 5);
}

const background = { r: 24, g: 32, b: 50 };
const objectColor = { r: 40, g: 55, b: 70 };

console.log(contrastRatio(background, objectColor));

这里使用的是简化亮度，不是完整的色彩管理标准，但足以用于第一轮诊断。对比度越低，物体边界越难从背景中分离；如果对象颜色和背景只差少量 RGB，优先调整亮度或边缘高光，而不是直接增加复杂纹理。

可以把亮度系数应用到颜色：

function scaleBrightness(color, factor) {
return {
r: Math.max(0, Math.min(255, color.r * factor)),
g: Math.max(0, Math.min(255, color.g * factor)),
b: Math.max(0, Math.min(255, color.b * factor)),
};
}

const shadowColor = scaleBrightness(objectColor, 0.65);
const highlightColor = scaleBrightness(objectColor, 1.35);

console.log({ shadowColor, highlightColor });

同一基础色生成阴影色和高光色，能先验证体积是否出现。factor 不是物理光照结果，只是视觉近似参数；阴影与高光的方向、宽度和透明度仍需要结合绘制位置判断。

3. 所有物体都像塑料时，检查材质差异

材质差异不只靠换颜色。光滑表面通常有更集中的高光，粗糙表面则有更宽、更淡的高光。可以先用 roughness 控制高光范围：

function highlightProfile(roughness, baseAlpha = 0.8) {
const safeRoughness = Math.max(0, Math.min(1, roughness));
return {
blur: 4 + safeRoughness * 24,
alpha: baseAlpha * (1 – safeRoughness * 0.65),
};
}

console.log(highlightProfile(0.1)); // 集中且明显
console.log(highlightProfile(0.8)); // 宽且柔和

roughness 取 0～1，越小表示越光滑；blur 使用 Canvas 像素，alpha 使用 0～1。这个函数不是完整 BRDF，而是把材质差异转换成两个可见参数：高光宽度和高光透明度。玻璃、金属、雾气和纸张不应该共用完全相同的高光配置。

纹理也可以作为材质线索，但要先控制强度：

function mixTexture(baseColor, textureColor, amount) {
const t = Math.max(0, Math.min(1, amount));
return {
r: baseColor.r * (1 – t) + textureColor.r * t,
g: baseColor.g * (1 – t) + textureColor.g * t,
b: baseColor.b * (1 – t) + textureColor.b * t,
};
}

const base = { r: 160, g: 120, b: 80 };
const texture = { r: 110, g: 85, b: 55 };
console.log(mixTexture(base, texture, 0.25));

amount 为 0 时完全使用基础色，为 1 时完全使用纹理色。纹理只需要打破均匀表面，不应该盖住整体明暗结构；如果 amount 过大，画面可能从“没有材质”变成“噪点太多”。

4. 元素互相粘连时，检查层次线索

层次通常由绘制顺序、透明度、阴影偏移和大小变化共同建立。先用简单的 z 值排序确定谁在前：

function sortByDepth(objects) {
return […objects].sort((a, b) => a.depth – b.depth);
}

const objects = [
{ name: 'front', depth: 2, alpha: 0.9 },
{ name: 'back', depth: 0, alpha: 1 },
{ name: 'middle', depth: 1, alpha: 0.8 },
];

console.log(sortByDepth(objects).map((object) => object.name));
// ['back', 'middle', 'front']

depth 只是排序依据，不一定等于真实三维 z 坐标。先绘制后面的对象，再绘制前面的对象，透明合成和遮挡关系才有机会正确出现。若绘制顺序反了，即使颜色和阴影都正确，画面仍会显得空间关系混乱。

可以让远处对象稍微变小、变淡：

function depthStyle(depth, maxDepth) {
const normalized = Math.max(0, Math.min(1, depth / maxDepth));
return {
scale: 1 – normalized * 0.25,
alpha: 1 – normalized * 0.4,
blur: normalized * 3,
};
}

console.log(depthStyle(6, 10));

normalized 是 0～1 的深度比例，scale 是尺寸系数，alpha 是透明度，blur 是像素模糊量。它们不是现实世界的必然规律，而是把“更远”转换成可见差异的近似方法。

5. 用隔离实验确定真正缺失的线索

最有效的排查方式是一次只保留一个变量。可以为对象提供开关：

function renderDiagnostic(ctx, object, options) {
const {
showBase = true,
showHighlight = false,
showShadow = false,
} = options;

ctx.save();

if (showShadow) {
ctx.shadowColor = 'rgba(0, 0, 0, 0.35)';
ctx.shadowBlur = 12;
ctx.shadowOffsetY = 8;
}

if (showBase) {
ctx.fillStyle = object.baseColor;
ctx.globalAlpha = object.alpha;
ctx.beginPath();
ctx.arc(object.x, object.y, object.radius, 0, Math.PI * 2);
ctx.fill();
}

if (showHighlight) {
ctx.shadowColor = 'transparent';
ctx.globalAlpha = 0.45;
ctx.fillStyle = '#ffffff';
ctx.beginPath();
ctx.arc(
object.x – object.radius * 0.25,
object.y – object.radius * 0.25,
object.radius * 0.3,
0,
Math.PI * 2,
);
ctx.fill();
}

ctx.restore();
}

先只打开 showBase，确认基础轮廓；再打开 showShadow，观察体积是否改善；最后打开 showHighlight，检查高光是否帮助区分材质。如果只打开高光就变得刺眼，问题不是“高光不够”，而是高光范围或透明度过大。

因此，看到“假”时可以按顺序排查：先看前景和背景的亮度差，再看不同材质是否拥有不同的高光与纹理，最后检查绘制顺序、透明度和阴影是否建立了前后关系。把现象拆成这些可观察参数后，视觉判断就能转成可重复的工程调试流程。下一节将进一步说明颜色本身如何通过明暗、饱和度和对比制造体积。

二、颜色不只是换色：明暗、饱和度与对比怎样制造体积

颜色在 Web 特效中不只是给对象换一件外衣。明暗差决定轮廓和体积，饱和度影响颜色的距离感和注意力，对比度决定对象能否从背景中分离出来。把这三个因素拆开后，就能用参数解释“为什么发平”，而不是不断试不同的十六进制颜色。

1. 明暗差先决定对象有没有体积

同一种色相如果亮度完全一致，圆形、面板和粒子会很容易变成一块平面。可以先用相对亮度近似检查两个颜色：

function luminance(color) {
return 0.2126 * color.r
+ 0.7152 * color.g
+ 0.0722 * color.b;
}

function luminanceGap(foreground, background) {
return Math.abs(
luminance(foreground) – luminance(background),
);
}

const background = { r: 24, g: 32, b: 50 };
const foreground = { r: 80, g: 120, b: 180 };

console.log(luminanceGap(foreground, background));

RGB 通道使用 0～255，返回值是简化的亮度差。差值越小，轮廓越容易融入背景；差值增大后，边界更清晰，但过大也可能显得生硬。这个计算不是完整的色彩管理标准，而是一个快速判断“颜色是否有足够明暗分离”的工具。

可以用亮度系数生成同一物体的阴影色和高光色：

function adjustBrightness(color, factor) {
return {
r: Math.max(0, Math.min(255, color.r * factor)),
g: Math.max(0, Math.min(255, color.g * factor)),
b: Math.max(0, Math.min(255, color.b * factor)),
};
}

const baseColor = { r: 70, g: 150, b: 240 };
const shadowColor = adjustBrightness(baseColor, 0.6);
const highlightColor = adjustBrightness(baseColor, 1.35);

console.log({ shadowColor, highlightColor });

factor 小于 1 会压低明暗，大于 1 会提高明暗，结果最终限制在 0～255。阴影色和高光色保留同一色相，比随意换成纯黑和纯白更容易保持统一的材质感觉。

2. 饱和度决定颜色是醒目还是退后

饱和度高的颜色更鲜艳，容易成为视觉焦点；降低饱和度后，颜色更接近灰色，适合背景、远景或次要对象。可以用 RGB 平均值做一个简单的去饱和处理：

function desaturate(color, amount) {
const t = Math.max(0, Math.min(1, amount));
const gray = 0.299 * color.r
+ 0.587 * color.g
+ 0.114 * color.b;

return {
r: color.r * (1 – t) + gray * t,
g: color.g * (1 – t) + gray * t,
b: color.b * (1 – t) + gray * t,
};
}

const vivid = { r: 40, g: 180, b: 255 };
console.log(desaturate(vivid, 0.35));

amount 为 0 时保留原色，为 1 时接近灰度。远处对象可以适当降低饱和度，前景交互对象保留较高饱和度，这是一种低成本的景深近似。它不是改变对象的真实材质，而是通过颜色注意力建立空间和主次关系。

3. 对比度要同时看对象、背景和边缘

一个对象的颜色即使很亮，如果它和背景同样明亮，仍可能没有轮廓。可以用对比度比例做更明确的检查：

function contrastRatio(colorA, colorB) {
const a = luminance(colorA);
const b = luminance(colorB);
const light = Math.max(a, b);
const dark = Math.min(a, b);
return (light + 5) / (dark + 5);
}

const panel = { r: 40, g: 52, b: 75 };
const panelBackground = { r: 24, g: 32, b: 50 };

console.log(contrastRatio(panel, panelBackground));

返回值越接近 1，两个颜色越难区分；值增大后，边界更明显。实际设计中不能只提高整个对象的亮度，否则会破坏材质层次。更好的办法是给轮廓、高光或阴影增加局部对比：

function drawContrastTest(ctx, x, y, color) {
ctx.save();

ctx.fillStyle = color;
ctx.fillRect(x, y, 80, 80);

ctx.strokeStyle = 'rgba(255, 255, 255, 0.55)';
ctx.lineWidth = 2;
ctx.strokeRect(x + 1, y + 1, 78, 78);

ctx.restore();
}

const canvas = document.querySelector('#contrast-stage');
const ctx = canvas.getContext('2d');
drawContrastTest(ctx, 20, 20, '#28344b');

边框只增加局部对比，不会把整个色块变成纯白。对于按钮、玻璃面板和粒子发光核心，局部边缘对比通常比简单提高 baseColor 更自然。

4. 渐变把明暗差变成连续体积

平面色块没有方向信息；渐变可以让颜色沿着空间位置变化，从而暗示光线方向：

function drawLightGradient(ctx, x, y, width, height) {
const gradient = ctx.createLinearGradient(x, y, x, y + height);
gradient.addColorStop(0, 'rgba(255, 255, 255, 0.55)');
gradient.addColorStop(0.45, 'rgba(80, 170, 255, 0.9)');
gradient.addColorStop(1, 'rgba(20, 60, 130, 0.95)');

ctx.save();
ctx.fillStyle = gradient;
ctx.fillRect(x, y, width, height);
ctx.restore();
}

drawLightGradient(ctx, 130, 20, 120, 160);

渐变停止点的位置是 0～1 的相对进度，颜色中的 Alpha 是 0～1。顶部高光、中部基础色和底部暗部共同构成明暗方向。停止点过少会显得机械，颜色跨度过大又可能出现突兀色带，因此应先确定光源方向，再调整色阶。

圆形粒子也可以用径向渐变制造中心发光和边缘衰减：

function drawGlow(ctx, x, y, radius, color) {
const gradient = ctx.createRadialGradient(
x – radius * 0.25,
y – radius * 0.25,
radius * 0.05,
x,
y,
radius,
);

gradient.addColorStop(0, color);
gradient.addColorStop(1, 'rgba(0, 0, 0, 0)');

ctx.save();
ctx.fillStyle = gradient;
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2);
ctx.fill();
ctx.restore();
}

径向渐变的中心偏移到左上方，暗示光线来自左上；末端透明度为 0，使光晕自然融入背景。若中心和边缘都使用相同亮度，粒子会失去发光方向，只剩一个模糊色块。

5. 把颜色参数组织成可调的视觉配置

当颜色、明暗和对比参数散落在绘制代码中，后续很难统一调整。可以集中成视觉配置：

const visualTheme = {
background: '#182033',
base: { r: 70, g: 150, b: 240 },
shadowFactor: 0.6,
highlightFactor: 1.35,
edgeAlpha: 0.55,
saturation: 0.85,
};

function createThemeColors(theme) {
const base = desaturate(theme.base, 1 – theme.saturation);

return {
base,
shadow: adjustBrightness(base, theme.shadowFactor),
highlight: adjustBrightness(base, theme.highlightFactor),
};
}

console.log(createThemeColors(visualTheme));

shadowFactor 和 highlightFactor 控制明暗范围，saturation 控制颜色退灰程度，edgeAlpha 控制轮廓强度。把这些值放在一个配置对象中，调试时可以一次修改一组相关参数，也方便为前景、背景和交互状态建立不同主题。

颜色制造体积的顺序通常是：先确保对象和背景有基本明暗差，再用饱和度建立前后主次，最后用渐变和局部边缘对比补充光线方向。颜色参数只有绑定到背景、坐标和绘制范围，才会从“换色”变成可解释的视觉结构。下一节将继续处理高光、粗糙度和纹理，说明不同材质为什么不能共用同一套颜色表现。

三、材质为什么看起来一样：高光、粗糙度与纹理如何区分表面

两个对象即使颜色不同，如果高光形状、边缘处理和纹理强度完全一致，眼睛仍会把它们判断成同一种材质。材质不需要一开始就做完整的物理模拟，可以先把表面差异拆成三个可控参数：高光有多集中，表面明暗变化有多快，纹理对基础色的影响有多强。

1. 高光的大小和透明度先区分表面

光滑表面的高光通常更集中、更亮；粗糙表面的高光更宽、更淡。可以把 roughness 映射成 Canvas 阴影或高光参数：

function getHighlightStyle(roughness) {
const r = Math.max(0, Math.min(1, roughness));

return {
radius: 6 + r * 20,
alpha: 0.75 – r * 0.45,
offsetX: –8 + r * 6,
offsetY: –10 + r * 8,
};
}

console.log(getHighlightStyle(0.1));
console.log(getHighlightStyle(0.85));

roughness 的范围是 0～1，radius 和偏移量的单位是 px，alpha 的范围是 0～1。roughness 越小，高光半径越小、透明度越高，适合玻璃或抛光金属；roughness 越大，高光更宽更弱，适合纸张、石材或雾面塑料。这不是物理 BRDF，而是把材质差异转换成可观察的参数。

2. 用局部高光而不是整块变白

材质高光应该只影响表面的一部分，不能把整个对象的颜色一起抬高：

function drawMaterialCircle(ctx, material) {
ctx.save();

ctx.fillStyle = material.baseColor;
ctx.globalAlpha = material.alpha;
ctx.beginPath();
ctx.arc(material.x, material.y, material.radius, 0, Math.PI * 2);
ctx.fill();

const style = getHighlightStyle(material.roughness);
const gradient = ctx.createRadialGradient(
material.x + style.offsetX,
material.y + style.offsetY,
1,
material.x + style.offsetX,
material.y + style.offsetY,
style.radius,
);

gradient.addColorStop(0, 'rgba(255, 255, 255, ' + style.alpha + ')');
gradient.addColorStop(1, 'rgba(255, 255, 255, 0)');

ctx.globalAlpha = 1;
ctx.fillStyle = gradient;
ctx.beginPath();
ctx.arc(material.x, material.y, material.radius, 0, Math.PI * 2);
ctx.fill();

ctx.restore();
}

const material = {
x: 140,
y: 100,
radius: 42,
baseColor: '#3478c4',
roughness: 0.25,
alpha: 1,
};

drawMaterialCircle(ctx, material);

基础色负责物体本身，高光渐变负责局部反射，二者使用不同的绘制阶段。高光中心偏向左上，表示光源从左上照来；如果把高光放在正中央，物体会更像发光贴纸，而不是有表面的实体。

3. 纹理要改变表面，但不能盖住形体

纹理的作用是增加微小变化，不是替代明暗结构。可以先计算纹理颜色和基础色的混合：

function mixColor(base, texture, amount) {
const t = Math.max(0, Math.min(1, amount));

return {
r: base.r * (1 – t) + texture.r * t,
g: base.g * (1 – t) + texture.g * t,
b: base.b * (1 – t) + texture.b * t,
};
}

const base = { r: 160, g: 120, b: 80 };
const texture = { r: 100, g: 75, b: 45 };

console.log(mixColor(base, texture, 0.2));

amount 为 0 时完全使用基础色，为 1 时完全使用纹理色。纸张、石材等粗糙表面可以使用较高的纹理变化；玻璃或纯色 UI 面板通常只需要很低的纹理强度，否则会破坏清晰度。

在 Canvas 中，纹理可以通过离屏画布先生成，再以透明度叠加：

function createNoiseLayer(width, height, random = Math.random) {
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;

const ctx = canvas.getContext('2d');
const image = ctx.createImageData(width, height);

for (let i = 0; i < image.data.length; i += 4) {
const value = Math.floor(random() * 256);
image.data[i] = value;
image.data[i + 1] = value;
image.data[i + 2] = value;
image.data[i + 3] = 24;
}

ctx.putImageData(image, 0, 0);
return canvas;
}

const noiseLayer = createNoiseLayer(128, 128);

每个通道使用 0～255，Alpha 24 约等于 0.094。低 Alpha 让纹理只产生轻微变化，不会覆盖主体。random 参数可以替换为固定函数，让测试时的纹理可复现。

4. 纹理采样方式也会改变材质观感

同一张纹理在不同缩放方式下可能表现为清晰颗粒、模糊斑块或闪烁噪声。Canvas 2D 可以控制图像平滑：

function drawTextureSample(ctx, image, x, y, width, height, smoothing) {
ctx.save();
ctx.imageSmoothingEnabled = smoothing;
ctx.globalAlpha = 0.35;
ctx.drawImage(image, x, y, width, height);
ctx.restore();
}

drawTextureSample(ctx, image, 20, 20, 96, 96, true);
drawTextureSample(ctx, image, 140, 20, 96, 96, false);

imageSmoothingEnabled 为 true 时，缩放后的边缘更平滑；为 false 时，像素边界更清晰，适合像素风纹理。纹理尺寸、对象尺寸和缩放比例必须一起考虑：一张过大的噪声图缩小后可能变成脏灰块，一张过小的图放大后可能出现明显重复。

对于 WebGL 纹理，还要区分过滤和图集边缘：

function configureMaterialTexture(gl, texture, linear) {
gl.bindTexture(gl.TEXTURE_2D, texture);

const filter = linear ? gl.LINEAR : gl.NEAREST;
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, filter);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, filter);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

gl.bindTexture(gl.TEXTURE_2D, null);
}

LINEAR 适合连续材质和缩放图像，NEAREST 适合需要保持像素边界的纹理。CLAMP_TO_EDGE 可以减少单张纹理采样到外部颜色的机会，但图集仍然需要为每个子图预留边距。

5. 用材质配置把差异集中起来

当不同对象拥有不同材质时，应把差异放入配置，而不是在绘制函数中写一堆对象名称判断：

const materials = {
glass: {
baseColor: '#65b9e8',
roughness: 0.08,
textureAmount: 0.02,
highlightAlpha: 0.8,
},
paper: {
baseColor: '#d6b98c',
roughness: 0.82,
textureAmount: 0.22,
highlightAlpha: 0.25,
},
metal: {
baseColor: '#77818d',
roughness: 0.28,
textureAmount: 0.08,
highlightAlpha: 0.9,
},
};

function describeMaterial(material) {
return {
highlight: getHighlightStyle(material.roughness),
textureAmount: material.textureAmount,
highlightAlpha: material.highlightAlpha,
};
}

console.log(describeMaterial(materials.glass));
console.log(describeMaterial(materials.paper));

glass、paper 和 metal 的颜色不同，但真正区分它们的是 roughness、textureAmount 和 highlightAlpha 的组合。配置对象还方便在同一场景中保持一致：同类对象使用同一套材质参数，改变主题时只改配置，不改算法。

材质区分的基本顺序是：先用高光集中程度区分表面，再用纹理强度补充微小变化，最后根据缩放比例选择合适的过滤方式。只要这些参数和光源方向、对象尺寸保持一致，Canvas 2D 也能用较低成本制造玻璃、纸张、金属等不同的表面暗示。下一节将继续处理遮挡、透明度和阴影，说明不同对象如何形成前后层次。

四、前后关系如何被看见：遮挡、透明度与阴影怎样建立层次

画面中的前后关系不是自动出现的。浏览器只会按照绘制命令、像素 Alpha 和阴影参数合成结果，开发者需要把“谁在前、谁在后、距离有多远”转换成顺序、透明度、尺寸和偏移。只要这些线索互相矛盾，元素就会粘在一起，或者看起来像漂浮在同一平面。

1. 绘制顺序决定谁覆盖谁

在 Canvas 2D 中，后绘制的对象会成为新的源，按照当前混合模式影响已经存在的目标像素。可以先用 depth 排序：

function sortByDepth(objects) {
return […objects].sort((a, b) => a.depth – b.depth);
}

const objects = [
{ name: 'front', depth: 2, color: '#ff8066' },
{ name: 'back', depth: 0, color: '#5080c0' },
{ name: 'middle', depth: 1, color: '#80c080' },
];

console.log(sortByDepth(objects).map((object) => object.name));
// ['back', 'middle', 'front']

depth 只是当前场景的排序值，数值越大表示越靠前。先绘制后面的对象，再绘制前面的对象，遮挡关系才符合预期。若顺序反了，即使颜色和透明度正确，空间关系也会混乱。

可以把排序直接接入绘制：

function renderDepthOrdered(ctx, objects, drawObject) {
const ordered = sortByDepth(objects);

for (const object of ordered) {
drawObject(ctx, object);
}
}

function drawRect(ctx, object) {
ctx.save();
ctx.fillStyle = object.color;
ctx.globalAlpha = object.alpha ?? 1;
ctx.fillRect(object.x, object.y, object.width, object.height);
ctx.restore();
}

renderDepthOrdered(ctx, objects, drawRect);

renderDepthOrdered 负责顺序，drawRect 负责表现。这样替换图形类型时，不需要重新实现深度排序。

2. 透明度决定遮挡是清楚还是柔和

完全不透明的对象会直接覆盖后面的对象，半透明对象则会保留一部分目标颜色。可以用 Alpha 合成计算两层覆盖后的结果：

function compositeAlpha(sourceAlpha, destinationAlpha) {
return sourceAlpha + destinationAlpha * (1 – sourceAlpha);
}

console.log(compositeAlpha(0.5, 1)); // 1
console.log(compositeAlpha(0.5, 0.5)); // 0.75

两个 Alpha 都为 0.5 时，结果不是简单相加为 1，而是 0.5 + 0.5 × 0.5 = 0.75。透明对象越多，重叠区域越容易变暗或变亮，因此玻璃、烟雾和光晕不能无限叠加。

绘制透明层时，应明确保存和恢复状态：

function drawTransparentLayer(ctx, object) {
ctx.save();
ctx.globalCompositeOperation = 'source-over';
ctx.globalAlpha = object.alpha;
ctx.fillStyle = object.color;
ctx.fillRect(object.x, object.y, object.width, object.height);
ctx.restore();
}

drawTransparentLayer(ctx, {
x: 80,
y: 60,
width: 160,
height: 80,
color: '#70b8ff',
alpha: 0.35,
});

globalAlpha 是当前源图形的整体透明度，范围为 0～1；source-over 是普通源覆盖模式。save 和 restore 防止透明度、组合模式和颜色影响后面的对象。

3. 阴影要服务于接触关系，而不是只做装饰

阴影最重要的作用是说明对象与背景或其他表面之间的距离。阴影偏移越大，通常表示对象离承载面越远；偏移越小，越像贴在表面上：

function shadowForHeight(height) {
return {
offsetX: height * 0.25,
offsetY: height * 0.5,
blur: 4 + height * 0.8,
alpha: Math.max(0.12, 0.42 – height * 0.02),
};
}

console.log(shadowForHeight(4));
console.log(shadowForHeight(18));

height 的单位是 px，offsetX、offsetY 和 blur 也是 px，alpha 使用 0～1。这里的映射是视觉近似：高度增加时阴影偏移和模糊增大，但阴影透明度降低。若阴影方向与光源方向矛盾，物体会同时产生两个不一致的空间线索。

可以把阴影参数应用到 Canvas：

function drawLiftedCard(ctx, card) {
const shadow = shadowForHeight(card.height);

ctx.save();
ctx.shadowColor = 'rgba(0, 0, 0, ' + shadow.alpha + ')';
ctx.shadowBlur = shadow.blur;
ctx.shadowOffsetX = shadow.offsetX;
ctx.shadowOffsetY = shadow.offsetY;
ctx.fillStyle = card.color;
ctx.fillRect(card.x, card.y, card.width, card.height);
ctx.restore();
}

drawLiftedCard(ctx, {
x: 80,
y: 180,
width: 180,
height: 70,
color: '#f0f5ff',
height: 10,
});

阴影应该与对象一起移动，但不能把 shadowOffsetY 误当成对象本身的 y 坐标。先确定光源方向，再统一所有对象的阴影偏移，画面才不会出现每个物体各自拥有一盏灯的情况。

4. 远近还可以通过尺寸、透明度和模糊表现

当对象没有真正的三维坐标时，可以把深度值映射成几个二维视觉参数：

function projectDepth(object, camera) {
const distance = Math.max(0, object.z – camera.near);
const normalized = Math.min(1, distance / camera.range);

return {
x: object.x,
y: object.y,
scale: 1 – normalized * 0.35,
alpha: 1 – normalized * 0.45,
blur: normalized * 3,
};
}

const projected = projectDepth(
{ x: 200, y: 120, z: 60 },
{ near: 0, range: 120 },
);

console.log(projected);

z、near 和 range 使用同一套深度单位，scale 是无量纲比例，alpha 是 0～1，blur 是 px。远处对象缩小、变淡并稍微模糊，能帮助眼睛判断层次；但这些变化必须保持方向一致，不能让远处对象反而更大、更清晰、更饱和。

可以把 scale 应用于绘制尺寸：

function drawProjectedCircle(ctx, object, projection) {
ctx.save();
ctx.globalAlpha = projection.alpha;
ctx.fillStyle = object.color;
ctx.beginPath();
ctx.arc(
projection.x,
projection.y,
object.radius * projection.scale,
0,
Math.PI * 2,
);
ctx.fill();
ctx.restore();
}

drawProjectedCircle(
ctx,
{ color: '#ffb347', radius: 24 },
projected,
);

这是二维画布中的景深近似，不是完整透视投影。它适合背景粒子、远景光点和层叠 UI，但不适合替代需要精确三维遮挡的 WebGL 场景。

5. 用调试层检查层次线索是否互相矛盾

如果画面仍然像一张平面，可以把 depth、Alpha 和阴影方向直接画出来：

function drawLayerDebug(ctx, object) {
ctx.save();
ctx.strokeStyle = '#ffb347';
ctx.lineWidth = 1;
ctx.strokeRect(object.x, object.y, object.width, object.height);

ctx.fillStyle = '#ffffff';
ctx.font = '12px sans-serif';
ctx.fillText(
'depth=' + object.depth + ' alpha=' + object.alpha,
object.x,
object.y – 6,
);

ctx.beginPath();
ctx.moveTo(object.x + object.width / 2, object.y + object.height / 2);
ctx.lineTo(
object.x + object.width / 2 + object.shadowOffsetX,
object.y + object.height / 2 + object.shadowOffsetY,
);
ctx.stroke();
ctx.restore();
}

drawLayerDebug(ctx, {
x: 40,
y: 40,
width: 120,
height: 60,
depth: 2,
alpha: 0.8,
shadowOffsetX: 6,
shadowOffsetY: 10,
});

调试框显示对象范围，文字显示 depth 和 alpha，线段显示阴影偏移方向。若 depth 顺序表示“越大越靠前”，但绘制顺序相反，就会马上暴露；若对象透明度很低却没有任何后景透出，则应检查是否重复设置了 Alpha 或使用了错误的混合模式。

建立层次时，可以按“排序 → 遮挡 → 透明 → 阴影 → 景深参数”的顺序处理。每增加一种线索，都要确认它和前面的线索方向一致：前景更清楚、后景更淡，靠近承载面阴影更紧，离开承载面阴影更散。这样前后关系才不是依靠单个特效硬撑，而是由多种可控参数共同说明。下一节将把这些低成本近似组合起来，形成 Canvas 2D 中可复用的真实感方案。

五、低成本视觉近似：Canvas 2D 如何补出真实感

Canvas 2D 不提供完整的物理材质系统，但它拥有渐变、阴影、透明合成、纹理和离屏画布等足够实用的工具。真实感的关键不是把所有效果都打开，而是让每一种效果承担明确任务：渐变说明光线方向，阴影说明接触和高度，透明度说明叠加关系，纹理说明表面差异。

1. 用渐变先建立光线方向

平面颜色缺少空间方向，线性渐变可以用较低成本暗示上亮下暗、左亮右暗等光照关系：

function drawLightPanel(ctx, x, y, width, height) {
const gradient = ctx.createLinearGradient(x, y, x, y + height);
gradient.addColorStop(0, '#d9f2ff');
gradient.addColorStop(0.45, '#62b6e8');
gradient.addColorStop(1, '#1e5b9c');

ctx.save();
ctx.fillStyle = gradient;
ctx.fillRect(x, y, width, height);
ctx.restore();
}

drawLightPanel(ctx, 40, 40, 220, 140);

渐变停止点的位置是 0～1 的相对进度，x、y、width、height 使用 Canvas 像素。顶部亮色、中部基础色和底部暗色共同说明光线从上方照来。先确定光源方向，再选择渐变方向，不能让同一场景中的对象各自使用相反光线。

圆形对象可以使用径向渐变：

function drawVolumeCircle(ctx, x, y, radius, color) {
const gradient = ctx.createRadialGradient(
x – radius * 0.3,
y – radius * 0.3,
radius * 0.05,
x,
y,
radius,
);

gradient.addColorStop(0, 'rgba(255, 255, 255, 0.75)');
gradient.addColorStop(0.28, color);
gradient.addColorStop(1, 'rgba(0, 20, 60, 0.9)');

ctx.save();
ctx.fillStyle = gradient;
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2);
ctx.fill();
ctx.restore();
}

drawVolumeCircle(ctx, 360, 110, 52, 'rgba(60, 150, 240, 0.9)');

高光中心偏向左上，边缘变暗，能让圆形从色块变成有体积的对象。渐变不是越强越真实：中心纯白、边缘纯黑会产生卡通或金属感，应根据对象材质降低色差。

2. 用阴影说明对象与背景的距离

阴影的核心不是装饰，而是接触线索。可以让阴影参数由对象高度近似得到：

function shadowStyle(height) {
const h = Math.max(0, height);

return {
offsetX: h * 0.25,
offsetY: h * 0.5,
blur: 4 + h * 0.8,
alpha: Math.max(0.12, 0.42 – h * 0.018),
};
}

function drawLiftedPanel(ctx, panel) {
const shadow = shadowStyle(panel.height);

ctx.save();
ctx.shadowColor = 'rgba(0, 0, 0, ' + shadow.alpha + ')';
ctx.shadowBlur = shadow.blur;
ctx.shadowOffsetX = shadow.offsetX;
ctx.shadowOffsetY = shadow.offsetY;
ctx.fillStyle = panel.color;
ctx.fillRect(panel.x, panel.y, panel.width, panel.height);
ctx.restore();
}

height、offsetX、offsetY 和 blur 的单位是 px，alpha 是 0～1。高度增加时，阴影偏移和模糊增大，透明度降低，暗示对象离开背景表面。光源方向必须统一，否则对象会出现互相矛盾的阴影。

如果对象很多，阴影会显著增加绘制成本。可以把阴影和主体分成两个开关，先确认是否真的需要：

function drawCard(ctx, card, options = {}) {
const { shadow = true } = options;

ctx.save();
if (shadow) {
ctx.shadowColor = 'rgba(0, 0, 0, 0.28)';
ctx.shadowBlur = 10;
ctx.shadowOffsetY = 6;
}

ctx.fillStyle = card.color;
ctx.fillRect(card.x, card.y, card.width, card.height);
ctx.restore();
}

drawCard(ctx, {
x: 60,
y: 220,
width: 180,
height: 70,
color: '#e9f4ff',
}, { shadow: true });

调试时先关闭 shadow，确认主体颜色和位置；再打开 shadow，观察真实感是否改善。如果关闭阴影后画面几乎没有变化，就不值得为它承担大量模糊开销。

3. 用透明合成叠加高光和光晕

高光不应该直接覆盖成白色，而应使用低 Alpha 叠加：

function drawHighlight(ctx, x, y, radius) {
const gradient = ctx.createRadialGradient(
x – radius * 0.25,
y – radius * 0.25,
1,
x,
y,
radius,
);

gradient.addColorStop(0, 'rgba(255, 255, 255, 0.5)');
gradient.addColorStop(1, 'rgba(255, 255, 255, 0)');

ctx.save();
ctx.globalCompositeOperation = 'screen';
ctx.fillStyle = gradient;
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2);
ctx.fill();
ctx.restore();
}

drawHighlight(ctx, 145, 105, 38);

screen 适合提亮光效，但不适合普通实体覆盖；如果需要更稳定的普通透明层，可以使用 source-over。globalCompositeOperation 是持久状态，必须用 save 和 restore 限制作用范围。

粒子光晕还可以拆成核心和外圈，避免单个渐变承担所有亮度：

function drawGlowParticle(ctx, particle) {
ctx.save();

ctx.globalCompositeOperation = 'lighter';
ctx.globalAlpha = particle.glowAlpha;
ctx.fillStyle = particle.color;
ctx.beginPath();
ctx.arc(particle.x, particle.y, particle.radius * 3, 0, Math.PI * 2);
ctx.fill();

ctx.globalCompositeOperation = 'source-over';
ctx.globalAlpha = particle.alpha;
ctx.fillStyle = '#ffffff';
ctx.beginPath();
ctx.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2);
ctx.fill();

ctx.restore();
}

drawGlowParticle(ctx, {
x: 300,
y: 180,
radius: 6,
color: '#4db8ff',
glowAlpha: 0.12,
alpha: 0.9,
});

外圈使用 lighter 累积光能，核心使用 source-over 保持清晰。glowAlpha 应较低，否则多个粒子重叠后会快速过曝。

4. 用纹理和离屏画布增加表面变化

重复生成噪声或纹理会浪费每帧时间，适合先绘制到离屏 Canvas，再重复使用：

function createNoiseTexture(size, random = Math.random) {
const offscreen = document.createElement('canvas');
offscreen.width = size;
offscreen.height = size;

const ctx = offscreen.getContext('2d');
const image = ctx.createImageData(size, size);

for (let i = 0; i < image.data.length; i += 4) {
const value = Math.floor(random() * 256);
image.data[i] = value;
image.data[i + 1] = value;
image.data[i + 2] = value;
image.data[i + 3] = 18;
}

ctx.putImageData(image, 0, 0);
return offscreen;
}

const texture = createNoiseTexture(128);

每个噪声像素的 Alpha 为 18，约等于 0.071，属于低强度表面变化。离屏纹理只创建一次，主画布每帧用 drawImage 绘制它，能避免重复分配 ImageData。

把纹理叠加到对象时，应裁剪到对象范围：

function drawTexturedCircle(ctx, texture, x, y, radius) {
ctx.save();
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2);
ctx.clip();

ctx.globalAlpha = 0.25;
ctx.drawImage(
texture,
x – radius,
y – radius,
radius * 2,
radius * 2,
);

ctx.restore();
}

drawTexturedCircle(ctx, texture, 420, 180, 46);

clip 让纹理只作用于圆形内部，globalAlpha 控制纹理强度。纹理应该补充基础色和明暗，而不是完全覆盖渐变；如果表面方向已经由渐变说明，纹理只需要提供小幅随机变化。

5. 用离屏合成减少重复状态和绘制成本

当一个对象由阴影、主体、高光和纹理组成时，可以先合成到离屏画布，再整体绘制到主画布：

function createCardRenderer(width, height) {
const offscreen = document.createElement('canvas');
offscreen.width = width;
offscreen.height = height;
const ctx = offscreen.getContext('2d');

return {
canvas: offscreen,
draw(card) {
ctx.clearRect(0, 0, width, height);
drawLiftedPanel(ctx, card);
drawLightPanel(ctx, 0, 0, width, height);
drawHighlight(ctx, width * 0.35, height * 0.25, width * 0.2);
},
};
}

const cardRenderer = createCardRenderer(220, 140);
cardRenderer.draw({ x: 0, y: 0, width: 220, height: 140, color: '#4c94d8', height: 8 });

离屏合成适合复杂但重复使用的卡片、按钮和材质贴片。若对象每帧都完全变化，离屏 Canvas 可能增加一次额外拷贝，不一定更快；应根据对象数量、更新频率和实际帧时间判断。

Canvas 2D 的低成本真实感可以归纳为一条链：先用颜色和渐变建立明暗方向，再用阴影建立接触和高度，用 Alpha 与混合模式叠加高光，最后用低强度纹理补充表面变化。每个效果都应有明确任务，并在对象数量增加时控制阴影、模糊和离屏合成的成本。下一节将把这些参数整理成一套兼顾可信度与性能的选型方法。

六、从参数调整到设计方法：怎样让特效既可信又不拖慢性能

视觉真实感不是参数越多越好，而是关键线索足够一致。颜色对比、材质高光、阴影范围、透明叠加和纹理细节都会带来成本；如果没有优先级，效果越加越复杂，画面却未必更可信。更稳妥的方法是先确定最重要的视觉结论，再为它分配有限的绘制和计算预算。

1. 先按视觉收益给参数排序

同一个对象通常有很多可调参数，但它们对观感的影响不同。可以先把参数分成三层：

第一层：位置、尺寸、明暗方向、前后顺序
第二层：阴影偏移、高光范围、透明度、颜色对比
第三层：纹理噪声、模糊半径、细小颗粒和装饰细节

可以用一个简单的权重函数帮助排序：

function rankParameter(parameter) {
const score = parameter.visualImpact
* parameter.consistency
/ Math.max(1, parameter.cost);

return {
name: parameter.name,
score,
};
}

const parameters = [
{ name: '明暗方向', visualImpact: 5, consistency: 5, cost: 1 },
{ name: '阴影模糊', visualImpact: 3, consistency: 3, cost: 4 },
{ name: '细小噪声', visualImpact: 1, consistency: 2, cost: 3 },
];

console.log(parameters.map(rankParameter));

visualImpact 表示参数对画面的影响，consistency 表示它能否与其他对象保持一致，cost 表示 CPU、GPU 或绘制时间成本。明暗方向通常收益高、成本低，应优先处理；细小噪声即使增加了纹理感，收益也可能低于它带来的采样和填充成本。

2. 给阴影、模糊和叠加设置预算

阴影、模糊和多层透明合成很容易在对象数量增加后成为瓶颈。可以按对象数量动态降低质量：

console.log(qualityForCount(24));
console.log(qualityForCount(260));

count 是当前需要绘制的对象数量，blur 使用 Canvas 像素，textureAlpha 使用 0～1。对象少时可以保留完整阴影和纹理；对象多时关闭阴影、降低纹理强度，通常比让所有对象都保留高质量更稳定。

绘制时读取同一份质量配置：

function drawQualityParticle(ctx, particle, quality) {
ctx.save();

if (quality.shadow) {
ctx.shadowColor = 'rgba(0, 0, 0, 0.25)';
ctx.shadowBlur = quality.blur;
ctx.shadowOffsetY = quality.blur * 0.5;
}

ctx.globalAlpha = particle.alpha;
ctx.fillStyle = particle.color;
ctx.beginPath();
ctx.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2);
ctx.fill();

ctx.restore();
}

质量降级必须保持视觉方向一致：关闭阴影后仍保留基础明暗，降低纹理后仍保留轮廓。这样用户会感觉细节减少，而不是对象的空间关系突然改变。

3. 用质量档位代替大量零散判断

与其在绘制代码中散落很多 if，不如提前选择 low、medium、high 三档：

const QUALITY_PRESETS = {
low: {
useGradient: false,
useShadow: false,
useTexture: false,
particleLimit: 120,
},
medium: {
useGradient: true,
useShadow: true,
useTexture: false,
particleLimit: 300,
},
high: {
useGradient: true,
useShadow: true,
useTexture: true,
particleLimit: 800,
},
};

console.log(selectQuality({
devicePixelRatio: window.devicePixelRatio,
particleCount: 180,
}));

devicePixelRatio 会影响实际像素数量，particleCount 影响更新和绘制次数。质量档位把视觉取舍集中到配置中，便于在移动设备、桌面设备和窗口缩放时统一调整。阈值仍应通过实际测试校准，不能把示例数值当成所有项目的固定标准。

4. 用设备表现和帧时间动态降级

静态质量档位还不够，因为同一设备在不同场景中的负载会变化。可以根据最近几帧的耗时调整当前档位：

let qualityLevel = 2;
qualityLevel = updateQualityLevel(qualityLevel, 28);
console.log(qualityLevel);

frameTime 使用毫秒，target 默认对应约 60 FPS 的 16.7 毫秒。连续几帧超过预算时降低等级，连续表现良好时再逐步恢复，避免一帧卡顿就频繁切换质量。qualityLevel 可以映射到前面的 QUALITY_PRESETS。

还应分别记录更新和绘制耗时：

function profileFrame(update, render) {
const frameStart = performance.now();

const updateStart = performance.now();
update();
const updateCost = performance.now() – updateStart;

const renderStart = performance.now();
render();
const renderCost = performance.now() – renderStart;

return {
total: performance.now() – frameStart,
update: updateCost,
render: renderCost,
};
}

console.table(profileFrame(
() => {},
() => {},
));

如果 update 成本高，应减少粒子计算、对象创建或数组遍历；如果 render 成本高，应减少阴影、模糊、纹理采样和绘制调用；如果两者都低但仍卡顿，还要检查页面其他脚本、布局和合成开销。

5. 用统一检查表完成设计决策

一个可信且高效的特效，可以按以下顺序验收：

1. 颜色和背景有足够明暗差
2. 同一场景的光源方向保持一致
3. 不同材质拥有不同的高光和纹理强度
4. 前后对象的绘制顺序、透明度和阴影互相一致
5. 纹理、模糊和阴影的成本有明确预算
6. 低端设备有可接受的降级方案
7. 关闭细节后，核心轮廓和运动仍然成立

可以把关键状态汇总为诊断数据：

function summarizeEffect({ objectCount, frameTime, quality, drawCalls }) {
return {
objectCount,
frameTime: Number(frameTime.toFixed(2)),
quality,
drawCalls,
withinBudget: frameTime <= 16.7,
};
}

console.log(summarizeEffect({
objectCount: 180,
frameTime: 14.8,
quality: 'medium',
drawCalls: 36,
}));

objectCount 是对象数量，frameTime 是单帧毫秒数，drawCalls 是绘制调用次数，withinBudget 用于快速判断是否接近 60 FPS 预算。设计时应先保证轮廓、运动和层次，再逐步添加高光、阴影和纹理；如果细节关闭后对象完全失去体积，说明基础颜色和层次没有建立好。

因此，可信的 Web 特效不是靠无限增加滤镜和纹理获得的，而是靠一致的光线方向、明确的前后关系、适度的材质差异和可测量的性能预算共同形成。Canvas 2D 足以完成许多网页交互、粒子和界面动效的视觉近似；当对象数量、纹理复杂度或自定义光照超过它的合理范围，再根据数据规模迁移到 WebGL。把“看起来真实”拆成参数，把“运行得流畅”拆成指标，视觉设计和工程性能才能同时得到控制。

七、关于八荒启

八荒启是一家专注于交互体验产品与解决方案的品牌，持续探索交互技术在教育教学、产品展示、过程模拟、操作训练和数据可视化等场景中的应用。

我们不仅分享技术实现，也持续创作和沉淀交互动画、数字作品、开发教程、项目案例与行业解决方案，希望通过交互技术，让复杂事物变得更加容易理解、探索、操作和创造。

八荒启，专为交互动画而生让复杂事物可探索、可操作、可反馈

如果你正在寻找交互作品、学习相关技术，或者希望把一个想法转化为可实际操作的交互项目，欢迎访问八荒启官网了解更多案例与服务。

官方网站：https://bahuangqi.com
主要内容：交互动画、3D 可视化、教育互动、仿真模拟与技术教程
定制服务：可通过官网提交需求或联系人工客服进行评估

感谢阅读。如果本文对你有所帮助，欢迎点赞、收藏和关注，我们会继续分享更多交互作品与项目实践。