前端工程师的日常不仅仅是把功Neng跑通，还得时刻准备着应对产品经理突如其来的“审美挑战”。

记得那是某个昏昏欲睡的下午三点，办公室的空气里弥漫着咖啡和焦虑混合的味道。产品经理突然把屏幕转了过来指着那个平平无奇的轮播图说：“这个，Neng不Neng高级一点？现在一切图就像PPT翻页，太生硬了。我们要那种……像水面一样扩散开的感觉，Zui好再有点电影感。”

我盯着屏幕，心里默默叹了口气。大家平时Zuo轮播图，常见方案基本就是 `opacity` 淡入淡出、`translateX` 左右滑动，或者来个 `3D` 翻转。说实话，这些方案够用是够用，但在“惊喜感”这方面确实比较有限。想要那种“水波推着画面前进”的丝滑感，常规的CSS动画恐怕是捉襟见肘了。

既然要玩点花的，那就得请出我们的老朋友——HTML5 Canvas。今天我就来手把手教大家如何通过像素级的操作，实现一个逼真的水纹涟漪轮播效果。这不仅仅是代码的堆砌，geng是一场视觉与数学的浪漫邂逅。

核心思路：为什么是Canvas？

你可Neng会问，为什么不用CSS或者现成的库？hen简单，因为我们要玩的是“像素”。CSS擅长处理DOM元素的变换，但hen难对图片内部的每一个像素点进行精细的位移操作。而Canvas就像一块空白的画布，我们Ke以通过JavaScript获取图片的每一个像素数据，然后根据数学公式计算出每个像素应该“游动”到哪里Zui后再重新绘制出来。

这种效果的核心在于模拟水波的物理特性：当一颗石子投入水中，波纹会从中心向外扩散，振幅随着距离的增加而衰减。我们要Zuo的，就是让图片上的像素点，随着这个虚拟的“波纹”发生偏移。

第一步：搭建舞台，HTML结构与DPR适配

在开始写那些复杂的算法之前，我们先得把舞台搭好。别小kan这一步，hen多同学写Canvas容易糊，问题常出在高清屏适配上。

我们的HTML结构其实非常简单，不需要花里胡哨的DOM嵌套。核心就是一个 `canvas` 元素，再加上左右切换按钮和底部的指示器。这里有个小技巧：我们把轮播的“画面”完全交给 Canvas 负责，而所有的控件dou使用常规的 DOM 元素。这样既保证了渲染性Neng，又让交互逻辑的实现变得简单许多，毕竟给DOM按钮加个点击事件比在Canvas里算坐标要容易多了。

  

◂
▸

接下来是重头戏——Canvas的初始化。为了在视网膜屏幕上显示清晰，我们必须处理 `devicePixelRatio`。Ru果不处理，画出来的东西就像没带眼镜kan世界一样，全是马赛克。

function resizeCanvas {
  const rect = canvas.parentElement.getBoundingClientRect;
  // 获取设备的像素比，比如Retina屏通常是2
  canvas.width = rect.width * devicePixelRatio;
  canvas.height = rect.height * devicePixelRatio;
  // 通过setTransform缩放绘图上下文，保证后续绘图逻辑Ke以使用CSS像素单位
  ctx.setTransform;
}

这段代码的作用就是让Canvas的物理像素尺寸等于CSS尺寸乘以设备像素比，然后通过缩放坐标系，让我们在写逻辑时依然Ke以按照CSS像素来思考，不用在那边乘来乘去算得头大。

第二步：图片处理与Cover裁剪逻辑

轮播图嘛，图片尺寸千奇百怪，但我们的容器是固定的。为了美观，我们通常希望图片Neng像CSS的 `background-size: cover` 一样铺满画布，不留黑边，也不变形。这需要我们在JS里实现一套类似的裁剪算法。

另外为了实现两张图片之间的无缝过渡，我们需要准备三个离屏Canvas：`fromCanvas`、`toCanvas`和 `outputCanvas`。离屏Canvas就像后台的加工厂，我们在内存里把图片处理好，Zui后一次性贴到屏幕上，用户就不会kan到闪烁的画面了。

我们需要把图片数据抓取出来：

const fromData = fromCtx.getImageData;
const toData = toCtx.getImageData;
const outputData = outputCtx.createImageData;

这里的 `pw` 和 `ph` 指的是画布的宽高。有了这三份数据，我们就Ke以开始玩“乾坤大挪移”了。

第三步：灵魂算法——水波纹的数学原理

这是整个效果Zui核心，也是Zui让人头秃的部分。我们要怎么模拟水波呢？

想象一下水波是从点击的位置向外扩散的。对于画面上的每一个像素点，我们需要计算它到波源的距离。根据这个距离，我们Ke以算出当前这个像素点处于波峰还是波谷。

这里用到了正弦波 `Math.sin` 来模拟周期性的波动，用指数衰减 `Math.exp` 来模拟波纹越来越弱的效果。代码大概长这样：

const relDist = waveFront - dist;
if  {
  // Ru果波纹Yi经传过去了就完全显示新图
  useNewImage = true;
} else if  {
  // 计算波的相位
  const wavePhase =  * Math.PI * 2;
  // 计算振幅：正弦波 * 衰减系数
  const amplitude = waveAmplitude * Math.sin
    * Math.exp * 2);
  // 计算偏移角度
  const angle = Math.atan2;
  // 根据角度和振幅，算出原始图像中对应的坐标
  srcX = x + Math.cos * amplitude;
  srcY = y + Math.sin * amplitude;
  // 判断是否主要显示新图
  useNewImage = relDist> waveWidth;
}

拆开理解一下：`waveFront` 是波前的位置，`dist` 是当前像素到波源的距离。`relDist` 就是波纹相对于当前像素的位置。Ru果波纹还没传到，就显示旧图；Ru果波纹Yi经传过去了就显示新图；Ru果波纹正好经过这里那就根据正弦函数算出一个偏移量 `amplitude`。

这个偏移量就是让像素点“抖动”的关键。通过 `Math.atan2` 算出角度，再结合 `Math.cos` 和 `Math.sin`，我们就Neng让像素点沿着波纹扩散的方向发生位移。这就是为什么你会kan到“像水波推着画面前进”的感觉，而不是生硬的图片切换。

第四步：性Neng优化——别让浏览器卡死

写到这里Ru果你直接运行代码，可Neng会发现：哇，效果出来了！但是……怎么风扇转得像直升机一样？

像素级循环Zui怕卡顿，因为一张普通的图片动辄就有几百万个像素点，每个点dou要算一遍正弦、余弦、指数，CPU压力山大。这里用了一个hen实用的策略：按块采样。

const step = 2;
for  {
  for  {
    // 计算一次后填充 step x step 区域
  }
}

这相当于“每 2x2 像素算一次”。算完一个点的偏移后我们直接把周围 2x2 的区域dou填上同样的颜色。Neng明显减轻运算量。因为波纹本身是连续变化的，人眼hen难察觉这点采样损失，性Neng却Neng换来hen大提升。这就是典型的“空间换时间”，在视觉效果和流畅度之间找到了一个完美的平衡点。

经过这一顿操作，我们终于把那个“像PPT翻页”的轮播图变成了充满电影感的水波涟漪效果。当产品经理 kan到这个效果时他的眼睛里应该会闪烁出惊喜的光芒。

其实前端开发的乐趣就在于此。我们不仅仅是代码的搬运工，geng是数字世界的魔术师。通过Canvas，我们Ke以突破浏览器的常规限制，创造出令人惊叹的视觉体验。

这套代码的交互逻辑是相当完整的，形成了一个完美的闭环。Ru果你想kan完整的源码或者在线演示，Ke以去 GitHub 或者 Gitee 上搜一下相关的仓库，里面有hen多细节值得深挖。

🎉 这里是 JYeontu，现在是一名前端工程师，有空会刷刷算法题，平时喜欢打羽毛球 🏸 ，平时也喜欢写些东西，既为自己记录 📋，也希望Ke以对大家有那么一丢丢的帮助。写的不好望多多谅解 🙇，写错的地方望指出，定会认真改进 😊。

偶尔也会在自己的公众号『前端也Neng这么有趣』发一些比较有趣的文章，有兴趣的也Ke以关注下。在此谢谢大家的支持，我们下文再见 🙌。

🌟 觉得有帮助的Ke以点个 star~

📬 有什么想要实现的功Neng或想法Ke以联系我~

🖊 有什么问题或错误Ke以指出，欢迎 pr~

PS教程:制作逼真水波纹,一圈一圈的涟漪,荡漾我心 PS教程:制作逼真水波纹,一圈一圈的涟漪,荡漾我心 SU7高速事故遇难者家属回应质疑:女儿有两...

产品：“像水面一样扩散开那种，Zui好再有点电影感”

在之前的教学视频中,我们分享了用置换的方法来制作涟漪中的倒影效果,本期教程我们来分享另外一种方法,制作出一圈一圈的水波纹效果,下面我们...

这个文件里交互是完整闭环：

github.com/yongtaozhen…

大家平时Zuo轮播图，常见方案基本是 opacity 淡入淡出、translateX 滑动、或者 3D 翻转。够用是够用，但“惊喜感”比较有限。

将其填充为白色，选择滤镜杂色，添加杂色，将弹出对话框中的数理直拉到Zui大 2 选择滤镜模糊，高斯模糊，调节为半径，为两个像素 3 在进入通道，将通道选择为红色通道，选择滤镜风格化浮雕效果，将角度设为180度 4 在进入绿色通道，同样选择滤镜风格化浮雕效果，将半径调节为，50度 5 接着回到图层，回到原图

🎉 这里是 JYeontu，现在是一名前端工程师，有空会刷刷算法题，平时喜欢打羽毛球 🏸 ，平时也喜欢写些东西，既为自己记录 📋，也希望Ke以对大家有那么一丢丢的帮助，写的不好望多多谅解 🙇，写错的地方望指出，定会认真改进 😊，偶尔也会在自己的公众号『前端也Neng这么有趣』发一些比较有趣的文章，有兴趣的也Ke以关注下。在此谢谢大家的支持，我们下文再见 🙌。

我：“要多高级？”

超赞!教你如何用Photoshop制作出逼真的水面涟漪效果! #Photoshop #ps #ps教学 - 蜜蜂吧于20231214发布在抖音,Yi经收获了2.2万个喜欢,来抖音,记录美好生活! 蜜蜂吧 粉丝1.2万获赞2.2万 关注 猜你喜欢 00:00 #济宁探店 #任城探店开学季薅羊毛 #优学派 #学习机 #自习室 优学派自习室9.9Ke以在这里写两个小时的作业7 00:00 学而思新品学练机,有题有课,Neng批改,还带视频讲解，一台顶八台，轻松带娃不费妈0 00:00 辅导孩子学习有难度?学而思学习机全学科、全学段内置资源免费学，geng有专业老师校内课程大纲1比1还原讲解~0 00:00 孩子保持年级前三背后的秘密是?#学而思学习机#学...

PS教你如何制作丁达尔光效果.PS教你如何制作照片拼图效果~.

gitee.com/zheng_yongt…

这就是为什么你会kan到“像水波推着画面前进”的感觉，而不是生硬切换。

const fromData = fromCtx.getImageData;const toData = toCtx.getImageData;const outputData = outputCtx.createImageData;

作用有三点：

function resizeCanvas { const rect = canvas.parentElement.getBoundingClientRect; canvas.width = rect.width * devicePixelRatio; canvas.height = rect.height * devicePixelRatio; ctx.setTransform;}

这段代码的作用：

关注公众号 前端也Neng这么有趣 ，获取geng多有趣内容。

另外它还实现了 cover 裁剪，保证不同尺寸图片douNeng完整铺满画布，不留黑边。

const step = ;for { for { // 计算一次后填充 step x step 区域 }}

这相当于“每 2x2 像素算一次”，Neng明显减轻运算量。因为波纹本身是连续变化的，人眼hen难察觉这点采样损失，性Neng却Neng换来hen大提升。

🌟 觉得有帮助的Ke以点个 star~

视频播放量 835、弹幕量 0、点赞数 11、投硬币枚数 2、收藏人数 21、转发人数 2,视频作者视频精修,作者简介专业制图修图、视频剪辑。关注我,送各种教程插件素材,相关视频:PS制作水面涟漪效果,PS制作光芒四射的效果,PS滤镜制作水面波纹,PS制作水面倒影,PS变形、图层样式制作纸张折角翘曲效果,PS制作毛笔字水墨效果,PS给照片添加下雨、雨丝效果,PS制作正、规则、不规则多边形,PS修改PDF中的文字图片并保存,PS制作格子条纹图案 PS滤镜制作水波纹水面涟漪效果 视频精修 发消息 专业制图修图、视频剪辑。关注我,送各种教程插件素材 接下来播放 自动连播 入...

大家平时Zuo轮播图,常见方案基本是opacity淡入淡出、translateX滑动、或者3D翻转.轮播 画面 只交给 Canvas 负责。.

在进入通道,将通道选择为红色通道,选择滤镜风格化浮雕效果,将角度设为180度.如何用格尺Zuo简易手机支架2020.02.09.在进入绿色通道,同样选择滤镜风格化浮雕效果,将半径调节为,50度.

📬 有什么想要实现的功Neng或想法Ke以联系我~

<div class="carousel" id="carousel"> <canvas id="canvas"></canvas></div><button class="nav-btn prev" id="prevBtn">◂</button><button class="nav-btn next" id="nextBtn">▸</button><div class="indicators" id="indicators"></div>

轮播“画面”只交给 Canvas 负责。

所有控件dou是常规 DOM，交互实现geng简单。

视觉重活在 JS 里Zuo，样式层只负责外观。

cover 裁剪 + DPR 适配

hen多同学写 Canvas 容易糊，问题常出在高清屏适配。

HTML ：一个 canvas + 左右按钮 + 底部指示器。

复古版画效果教程,告诉你原理,还手把手教你怎么制作.墙面涂鸦效果样机制作,后期可随意geng改内容。.

这里用了 fromCanvastoCanvasoutputCanvas 三个离屏画布

const relDist = waveFront - dist;if { useNewImage = true;} else if { const wavePhase = * Math.PI * ; const amplitude = waveAmplitude * Math.sin * Math.exp * ); const angle = Math.atan2; srcX = x + Math.cos * amplitude; srcY = y + Math.sin * amplitude; useNewImage = relDist> waveWidth;}

拆开理解：

“这个轮播图Neng不Neng高级一点？现在一切图就像 PPT 翻页”

像素级循环Zui怕卡顿，这里用了一个hen实用的策略：按块采样。

办公室下午 点，产品同学把电脑转过来：

分步阅读实例:AE2020 波纹 制作雨后涟漪.4将波纹效果,添加到图片素材上,打开效果控件面板,如图所示。.

---