梦想 - 音乐沙龙 - 花潮论坛 - Powered by Discuz! Archiver

马黑黑 发表于 2024-5-10 12:22

梦想

马黑黑 发表于 2024-5-10 12:22

马黑黑 发表于 2024-5-10 12:28

本帖最后由马黑黑于 2024-5-10 12:30 编辑 <canvas id="mycanv" width="760" height="200"></canvas>

<script>

const text = '俺有一个梦想：扯布';
const skip = 4;
const ctx = mycanv.getContext('2d');

ctx.fillStyle = 'cyan';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.font = 'bold 70px sans-serif';
ctx.fillText(text, mycanv.width / 2, mycanv.height / 2);
ctx.fill();

let data = ctx.getImageData(0, 0, mycanv.width, mycanv.height).data;

ctx.shadowOffsetX = skip > 4 ? -skip * 2/3 : -1;
ctx.shadowOffsetY = skip > 4 ? -skip * 2/3 : -1;
ctx.shadowBlur = skip * 2/3;
ctx.shadowColor = 'black';

for (var y = 0; y < mycanv.height; y += skip) {
for (var x = 0; x < mycanv.width; x += skip) {
var opt = (x + y * mycanv.width) * 4 + 3;
if (data > 0) {
ctx.fillStyle = `#${Math.random().toString(16).substr(-6)}`;
ctx.fillRect(x, y, skip - 1, skip - 1);
}
}
}

</script>

红影发表于 2024-5-10 13:41

原来这个帘子是可以被掀开的，哈哈，来，掀起帘子，客官请进{:4_172:}

红影发表于 2024-5-10 13:43

我的天，这到底怎么做的啊，掀起帘子感觉帘布的其他部分也跟着互动，像真的现实里掀开帘子一样呢{:4_199:}

红影发表于 2024-5-10 13:45

哎呀，我扯动帘子的力道大了点，把帘子扯了个大洞{:4_200:}{:4_193:}

红影发表于 2024-5-10 13:46

哈哈，又使劲拉扯一下，帘子彻底废了，落在地上。而且安不上去了。好吧，不要帘子也罢{:4_170:}

山人发表于 2024-5-10 13:48

红影发表于 2024-5-10 13:45
哎呀，我扯动帘子的力道大了点，把帘子扯了个大洞

右击复原

红影发表于 2024-5-10 13:48

掉在地上的帘字也能玩呢，跟着鼠标互动，还能被拎起来{:4_196:}

红影发表于 2024-5-10 13:51

又玩了一会，这次是扯了一半的帘子掉落了。这个好玩，跟玩游戏似的{:4_173:}

红影发表于 2024-5-10 13:52

这帘子的弹性真好啊，玩这个跟小时候跳小皮筋似的{:4_375:}

红影发表于 2024-5-10 13:52

山人发表于 2024-5-10 13:48
右击复原

原来右键也可以，我直接f5刷新了。刷新帘子还变色的呢{:4_173:}

马黑黑 发表于 2024-5-10 13:54

红影发表于 2024-5-10 13:52
原来右键也可以，我直接f5刷新了。刷新帘子还变色的呢

右击复原也是变色的

红影发表于 2024-5-10 14:12

马黑黑发表于 2024-5-10 13:54
右击复原也是变色的

去试了试
<canvas id="canv" width="400" height="400"></canvas>
修改这个其实没法改变帘子大小呢，变大则移位，变小则和这个效果不同了呢{:4_204:}

红影发表于 2024-5-10 14:16

比如我宽度不变，高度变200，则有一部分帘子拖在地上了{:4_173:}

红影发表于 2024-5-10 14:22

#canv { position: absolute; bottom: 0; left: 490px; }

这个设置也奇怪，明明它在背景图上的位置不是bottom: 0呢{:4_173:}

南无月 发表于 2024-5-10 17:55

马黑黑发表于 2024-5-10 12:28
本帖最后由马黑黑于 2024-5-10 12:30 编辑

这个梦想练习手指灵活度{:4_173:}

南无月 发表于 2024-5-10 17:58

代码实现的不仅有静态和动态。
还有力度的感觉
轻轻扯拉，和用力拉扯的完全不同
摸拟真实场景，完美地呈现出来
所以，这个效果更让人感觉亲切
互动感更强。。{:4_199:}

南无月 发表于 2024-5-10 18:01

鼠标划过时的破裂感，碎片感。。好象是真的用手扯出来的。。
感觉好真实。。
体验感强
代码神手非常厉害。。{:4_199:}

马黑黑 发表于 2024-5-10 18:04

南无月发表于 2024-5-10 17:58
代码实现的不仅有静态和动态。
还有力度的感觉
轻轻扯拉，和用力拉扯的完全不同

从版权声明看，这个特效是作者2013年写的，次年他还发布了一个3d版本的。这两个版本我都找到了，可惜的是作者的GitHub貌似已经不能访问了，也不知后来有没有更新过。

2d版本，就是这个扯布料的，它是没有复原功能的，复原代码是我补上去的。

3d版本没那么优秀，但也可以玩一玩，现在我要做的是扯烂后怎么复原，其代码要比2d版本复杂得多。

页: [1] 2 3 4 5 6

花潮论坛's Archiver

梦想