html5如何实现图片倒影_html5图片倒影生成教程【代码】

canvas是绘制图片倒影最可靠方案：先加载图片，用ctx.scale(1,-1)翻转坐标系并调整y偏移绘制倒影，再叠加createLinearGradient渐变遮罩，同时缓存canvas实例提升性能。

用 canvas 绘制图片倒影最可靠

html5 本身没有原生「倒影」css 属性，box-reflect 是 webkit 旧私有属性，现代浏览器基本不支持（chrome/firefox/edge 均已废弃）。真正跨浏览器、可控性强的做法是用 canvas 手动翻转并绘制：先加载图片，再以 y 轴为对称线，在 canvas 下方画一个垂直翻转的副本，并叠加半透明遮罩。

关键点：

• canvas 需足够高，容纳原图 + 倒影（建议高度 = 原图高 × 2.2，留出间距和渐变余量）
• 倒影绘制必须用 ctx.scale(1, -1) 翻转坐标系，再调整 y 偏移，否则图像会镜像错位
• 渐变遮罩要用 ctx.createLinearGradient() 从倒影顶部向下设透明度变化，不能靠 CSS opacity 整体压暗

drawImage 翻转时 y 坐标容易算错

直接调 drawImage(img, dx, dy, dw, dh) 画倒影不行——它不支持翻转。必须配合 ctx.save() / ctx.restore() 和坐标变换。常见错误是把翻转后的 y 设成 img.height * 2，结果倒影被画到画布外。

正确做法：

立即学习“前端免费学习笔记（深入）”；

• 先 ctx.translate(0, img.height * 1.1) 把原点移到倒影起始位置
• 再 ctx.scale(1, -1) 垂直翻转
• 最后 drawImage(img, 0, 0) —— 此时图像自然向上“长”出倒影区域
• 记得在翻转前 ctx.globalAlpha = 0.6 控制不透明度

CSS -webkit-box-reflect 已不可靠，别依赖

虽然部分老教程还写 style="-webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.3));"，但实测在 Chrome 90+、Firefox 100+、Edge 110+ 中完全无效，且无降级提示。safari 15.4 之后也已移除支持。用它上线等于放弃倒影功能。

如果你只是想快速预览，可用临时方案：

• 仅 Safari 14–15.3 测试环境可试 -webkit-box-reflect
• 其他场景一律走 canvas，或服务端生成带倒影的静态图
• 切勿用 transform: scaleY(-1) 对 img 元素做伪倒影——无法叠加渐变，且会触发 layout 重排

性能注意：避免每帧重绘，倒影图可缓存

如果页面有多个相同图片需倒影（比如商品列表），每次 onload 都新建 canvas 并重绘浪费资源。应该按图片 src 做 key 缓存 HTMLCanvasElement 实例。

简单缓存逻辑：

• 用 map 存 src → canvas 映射
• 首次加载时生成带倒影的 canvas，后续直接复用
• 监听 img.naturalWidth === 0 防止未加载完就读尺寸
• 移动端尤其要注意：canvas 宽高超过屏幕宽度 2 倍可能触发渲染降级

倒影看似简单，但跨浏览器一致性和性能边界很窄——canvas 是目前唯一能同时控制翻转精度、渐变停靠点、透明通道的方案。别省那几行代码去碰私有属性，真要兼容就老老实实 draw。