Canvas纹理透明度控制分两种：一是用globalAlpha统一降低填充区域不透明度，二是用PNG源图自带Alpha通道实现精细控制；前者轻量但影响全局，后者支持噪点、柔边等复杂效果且适配高DPI屏幕。
Canvas 用 createPattern 绘制复杂纹理时，透明度控制不是靠图案图像本身“调低不透明度”，而是通过两种互补方式实现：一是设置图案填充区域的全局透明度（globalAlpha），二是直接在图案源图像中嵌入 Alpha 通道（如 PNG 的半透明像素）。两者效果不同，适用场景也不同。
图案图像自带透明度（推荐用于精细控制）
真正“复杂纹理”往往依赖图像自身的层次感，比如叠加噪点、柔边蕾丝、渐变灰度蒙版等。这类效果必须在图案源图里完成——Canvas 不会帮你合成或模糊，它只忠实地平铺你给的像素。
- 用 PNG 格式保存纹理图，确保边缘过渡自然、Alpha 通道完整（例如：半透明木纹、带阴影的砖缝、镂空织物）
- 加载时无需额外处理，
ctx.createPattern(img, 'repeat')会原样保留所有透明信息 - 适合需要局部透出底层内容的设计，比如文字上叠加薄纱质感、按钮背景透出下层渐变
全局透明度影响整个填充区域（简单统一降透）
如果只是想让整块纹理“变淡一点”，不改变内部结构，globalAlpha 是最轻量的方式。它作用于后续所有绘制操作，包括 fill 和 stroke。
- 设置
ctx.globalAlpha = 0.7后，再执行ctx.fillStyle = pattern; ctx.fillRect(...)，整个矩形都会按 70% 不透明度渲染 - 注意：该值会持续生效，绘制完记得重置为
1.0，否则影响后续图形 - 不能单独控制 fill 和 stroke 的透明度差异；若需分别设定，改用
rgba()配色或fillStyle中写透明色值（但对图案无效）
混合描边与填充的透明策略
纹理既做填充又做描边时，透明度要分开考虑：描边线条容易因透明叠加显得发虚，而填充区域则更容许柔和过渡。
- 描边建议优先用图案图像自身含 Alpha 的方式（如细线边缘带羽化），避免单纯调
globalAlpha导致线条断裂感 - 填充可用
globalAlpha快速调节整体浓度，再配合ctx.imageSmoothingEnabled = false保持像素级锐利（尤其对几何纹理） - 文字纹理描边示例：
ctx.strokeStyle = pattern; ctx.globalAlpha = 0.9; ctx.strokeText('TEXT', x, y); ctx.globalAlpha = 1;
高 DPI 屏幕下的透明一致性
在 Retina 或 4K 屏上，小尺寸纹理图被放大后，半透明像素容易糊开，看起来像“雾化”。这不是透明度设错了，而是采样问题。
- 提供 @2x 或 @3x 分辨率的纹理图（如 128×128 做 64×64 的@2x版），让浏览器有足够像素可缩放
- 禁用插值：
ctx.imageSmoothingEnabled = false，强制硬边采样，适合像素风、网格类纹理 - 避免用 CSS 缩放 canvas 元素——这会让整个渲染缓冲区模糊，连带透明边缘失真
