canvas画布：金花文本特效

马黑黑

马黑黑

代码

<canvas id="mycanv" width="760" height="200" style="border: 1px solid tan; border-radius: 6px;"></canvas>   <script> var skip = 4; var text = '花潮論壇風光美'; var ww = mycanv.width, hh = mycanv.height; var ctx = mycanv.getContext('2d'); //输出文本 ctx.fillStyle = 'yellow'; ctx.font = 'bold 100px sans-serif'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(text, ww/2, hh/2); //获取像素信息 var tData = ctx.getImageData(0, 0, ww, hh); var data = tData.data; //rgba数据 //按间隔设定循环像素集群并随机更改指定像素点颜色构成 for (var j = 0; j < data.length; j += skip) {     if(data[j + 3] > 0) {         data[j] = `${Math.floor(Math.random() * 256)}`;         data[j + 1] = `${Math.floor(Math.random() * 256)}`;         data[j + 2] = `${Math.floor(Math.random() * 256)}`;         data[j + 3] = `${Math.floor(Math.random() * 150 + 100)}`;     } } //将更改的数据写回画布 ctx.putImageData(tData, 0, 0); </script>

马黑黑

和昨天发布的颗粒化文本特效相比，这个貌似是给文本撒上彩色金粉，但它可以扩展：仅需修改像素间隔变量  skip 的值便能产生差异性极大的特效。skip 取值必须为正整数，上限一般建议取文本的尺寸设定值（当然可以尝试突破以查看效果）。

实现原理：按 skip 指定的间隔读取画布像素集群，但凡被检测的像素点rgba数据中 a 不等于 0 即不为全透明则以随机数依次更改该像素点的 r、g、b、a 的数值，最后将已经变动了的数据写回画布覆盖原来的文本。

马黑黑

依据被检测像素 alpha 通道不为全透明原理，此法同样适合于处理画布中绘制的任何图像，得到的效果将是图像被随机撒上金粉。

红影

去试了更改 skip 的值，得到的效果变化很大呢

红影

好像数值取得越大，越接近底色，4以下时，无论底色是什么，得到的效果都差不多呢。

马黑黑

红影 发表于 2024-5-11 19:09
好像数值取得越大，越接近底色，4以下时，无论底色是什么，得到的效果都差不多呢。

多尝试，体会

红影

马黑黑 发表于 2024-5-11 19:56
多尝试，体会

嗯嗯，试一试也很有趣呢。

马黑黑

红影 发表于 2024-5-11 20:32
嗯嗯，试一试也很有趣呢。

那是的

南无月

skip 取值必须为正整数。。
数字大些有抽丝效果。。
金花字儿好看

马黑黑

南无月 发表于 2024-5-11 21:16
skip 取值必须为正整数。。
数字大些有抽丝效果。。
金花字儿好看

小辣椒

黑黑的新习惯，还没有尝试过

马黑黑

小辣椒 发表于 2024-5-11 23:12
黑黑的新习惯，还没有尝试过

红影

马黑黑 发表于 2024-5-11 20:50
那是的

看各种效果在眼前滑过

马黑黑

红影 发表于 2024-5-12 09:50
看各种效果在眼前滑过

感觉美妙

南无月

马黑黑 发表于 2024-5-11 21:27

马黑黑

南无月 发表于 2024-5-12 17:26

谢花

红影

马黑黑 发表于 2024-5-12 10:39
感觉美妙

是的，很不错

马黑黑

红影 发表于 2024-5-12 19:15
是的，很不错

可以玩出很多样式来

南无月

马黑黑 发表于 2024-5-12 18:00
谢花

谢春花