画框里挂着一张照片，每隔一小段时间就有一条看不见的直线横穿画面，把当前所有碎片沿这条线一分为二；切开的两半随即朝相反方向滑开一点，并带着轻微旋转。切的次数越多，碎片越细，整张照片逐渐从完整走向碎裂，到达设定次数后自动重来。右上角有一个可折叠的控制面板，能调切割间隔、下落速度和横向偏移，还能打开调试模式看到切割线本身。技术上是 原生 Canvas 配多边形裁剪算法，第三方库只用了一个参数面板。
这份源码的三个关键点
碎片是多边形，不是矩形。初始状态是一个四边形，每次切割都把多边形按直线拆成两个新多边形，顶点数会随切割次数增长，所以形状是真正不规则的。
贴图靠坐标映射。每个碎片记住自己在原图上的位置，绘制时按这个偏移取像素，因此碎片移动后上面的图案依然是原图对应的那一块。
切割线取自外接圆。先在一个能罩住整张图的圆上随机取一点，再取它的近似对径点，两点连线必然穿过整幅画面，不会切空。
为什么第二个点不是正对径点
源码里第二个端点不是简单的「加半圈」，而是加半圈之后再随机偏移最多四分之一圈：
const angle1 = angle0 + Math.PI + Math.random() * (Math.PI / 2) * randomDirection;
如果用正对径点，每条切割线都会穿过圆心，碎片会呈放射状均匀分布，看久了很规律。加上这个偏移后，切割线有远有近、有斜有正，碎片大小差异明显，解构过程才显得自然。注释里保留了另外两种取点方案，可以直接切换对比效果——这是这份源码作为学习材料的贴心之处。
能改的地方
控制面板里的三项（切割间隔、最小下落速度、横向偏移系数）可以实时调，满意后把数值写回脚本顶部的同名变量即可固化。换图只需替换脚本末尾那两张内嵌图片的地址，一张是照片、一张是画框，尺寸会自动适配。想改成点击触发一次切割，把定时调用换成事件绑定即可。
常见问题
换成自己的图后是白屏？
脚本会等两张图解码完成再启动，如果图片地址错误或跨域受限，尺寸会是零从而无法取像素。请把图片放在同目录下，并通过本地服务器打开页面。
碎片太多之后变卡？
碎片数量随切割次数成倍增长，每一片都要独立绘制。把切割总次数调小，或者在达到一定数量后停止切割只保留漂移，是最有效的优化。
可以保存成视频或动图吗？
可以。这类逐帧绘制的画布用浏览器自带的媒体录制接口就能录下来；源码中原本引用的录制插件已移除，需要的话自行接入即可。
适合用在哪
图片切换的转场动画、艺术与设计类站点的首屏、展览与作品集的开场，也是一份很好的「多边形沿直线裁剪」算法参考。切割算法、贴图映射与漂移逻辑的完整实现都在脚本里，下载后可查看。
