尘世天使（canvas画布抽丝效果）

马黑黑 · 发表于 2024-4-24 12:53

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2024-4-24 12:54 编辑

马黑黑 · 发表于 2024-4-24 12:55

代码

<style>

#mydiv { margin: 20px 0; left: calc(50% - 81px); transform: translateX(-50%); width: fit-content; height: fit-content; overflow: hidden; pointer-events: none; position: relative; }

#mydiv::after { position: absolute; content: url('https://638183.freep.cn/638183/small/f01.png'); left: 20px; top: 20px; mix-blend-mode: multiply; cursor: pointer; pointer-events: auto; animation: rot 6s linear infinite var(--state); }

#canv { positon: absolute; background: #333; border: 1px solid gray; }

@keyframes rot { to { transform: rotate(360deg); } }

</style>

</div>

var ctx = canv.getContext('2d');

var img = new Image();

img.crossOrigin = 'anonymous';

img.onload = () => {

ww = canv.width = img.width;

hh = canv.height = img.height;

ctx.drawImage(img, 0, 0);

reDraw(ctx, ctx.getImageData(0,0,ww,hh));

};

img.src = 'https://638183.freep.cn/638183/t24/2/angel.jpg';

var reDraw = (context, data) => {

for(var i = 0; i < data.data.length; i += 4) {

if(i % 60 === 0) data.data[i+3] = 100;

}

ctx.clearRect(0, 0, ww, hh);

context.clearRect(0,0,ww,hh);

context.putImageData(data,0,0);

};

aud.onplaying = aud.onpause = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');

mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();

</script>

马黑黑 · 发表于 2024-4-24 13:02

实现原理：获取图片所有像素信息，按一定间隔更改alpha通道值，然后刷新画布。

画布设置背景色，背景色将影响丝线的颜色。代码在 04 行；

遍历图片像素，下标被 60 整除的，则将该像素的 alpha 值改为 100。在canvas画布，alpha 值取值范围是 0~255，取 100 则是大半透明，可根据需要设置该值（全透明也是可以的）。像素改 alpha 值的条件依据被整除数，不同的被整除数会得到不同的丝线效果。代码在 28 行。