天高几许问真龙
<canvas id="canv" width="760" height="200"></canvas><script>
const text = '天高幾許問真龍';
const skip = 4;
const ctx = canv.getContext('2d');
ctx.fillStyle = 'cyan';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.font = 'bold 100px sans-serif';
ctx.fillText(text, canv.width / 2, canv.height / 2);
ctx.fill();
let cData = ctx.getImageData(0, 0, canv.width, canv.height);
let data = cData.data;
for (var y = 0; y < canv.height; y += skip) {
for (var x = 0; x < canv.width; x += skip) {
var opt = (x + y * canv.width) * 4 + 3;
if (data > 0) {
ctx.fillStyle = `#${Math.random().toString(16).substr(-6)}`;
ctx.fillRect(x, y, skip - 1, skip - 1);
}
}
}
</script> 代码
<canvas id="canv" width="800" height="200"></canvas>
<script>
const text = '天高幾許問真龍';
const skip = 4;
const ctx = canv.getContext('2d');
ctx.fillStyle = 'cyan';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.font = 'bold 100px sans-serif';
ctx.fillText(text, canv.width / 2, canv.height / 2);
ctx.fill();
let cData = ctx.getImageData(0, 0, canv.width, canv.height);
let data = cData.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 < canv.height; y += skip) {
for (var x = 0; x < canv.width; x += skip) {
var opt = (x + y * canv.width) * 4 + 3;
if (data > 0) {
ctx.fillStyle = `#${Math.random().toString(16).substr(-6)}`;
ctx.fillRect(x, y, skip - 1, skip - 1);
}
}
}
</script>
如果需要粒子阴影，请把 19 和 24 行的注释拿掉
各参数可以调整以做出不同的效果：
06 行代码 skip 变量 ：xy方向间隔多少个像素做检测，建议值 2 ~ 12；
09行代码 ：文本原始颜色；
12行代码 ：100px 是文本大小，建议值 30px 以上，太小的尺寸可能不合适做文字粒子化；
19~24行代码：粒子阴影，一楼效果未使用。若要使用，请去掉注释；
30行代码 ：粒子颜色。这里使用随机颜色。可以使用纯色，会有更清爽的效果；
31行代码 ：绘制矩形状的小粒子，xy是矩形左上角坐标，两个 skip - 1 是矩形宽高，这四个参数均可适当调整从而产生不同的效果（源于粒子的位置与大小）。 本帖最后由 马黑黑 于 2024-5-10 13:53 编辑
实现思路：
按预定的像素间隔，纵横读取读取画布像素rgba信息，判断检测点颜色的alpha通道值，凡不为全透明的就在那里绘制矩形。
本例的初衷是做一个静态粒子化文本效果，但其实现方式可以作用于其他情形：若给画布加载图片或绘制其他任何图形，则画布上的图像也和文字一样被像素化。 文字粒子化。这个文字这样弄了太有趣了{:4_199:} 马黑黑 发表于 2024-5-10 12:19
如果需要粒子阴影，请把 19 和 24 行的注释拿掉
各参数可以调整以做出不同的效果：
讲解好详细啊，跟着去试了各种效果，很有趣{:4_187:} 我看到了马赛克墙似的文字。。。{:4_173:} 马黑黑 发表于 2024-5-10 12:19
如果需要粒子阴影，请把 19 和 24 行的注释拿掉
各参数可以调整以做出不同的效果：
有许多不同效果，这个好，又有新的文字样式可以用了。。{:4_199:} 南无月 发表于 2024-5-10 18:08
我看到了马赛克墙似的文字。。。
{:4_172:} 南无月 发表于 2024-5-10 18:09
有许多不同效果，这个好，又有新的文字样式可以用了。。
可以简化一下代码，比如不需要阴影时去掉那一部分代码，16、17行可以整合成一行，还可以根据情况不需要 skip 变量，等等等等。 马黑黑 发表于 2024-5-10 18:26
可以简化一下代码，比如不需要阴影时去掉那一部分代码，16、17行可以整合成一行，还可以根据情况不需要 s ...
好哒。无穷变化最好了。{:4_199:} 马黑黑 发表于 2024-5-10 18:24
标准叫法是什么：像素化文字？ 南无月 发表于 2024-5-10 20:06
标准叫法是什么：像素化文字？
颗粒化 南无月 发表于 2024-5-10 20:05
好哒。无穷变化最好了。
是的 马黑黑 发表于 2024-5-10 21:02
颗粒化
好听，还是粒子化文字 真龙在哪呢 绿叶清舟 发表于 2024-5-10 21:08
真龙在哪呢
你问问就知道了 南无月 发表于 2024-5-10 21:04
好听，还是粒子化文字
都可以，但不是像素化。这是N个像素处理的 马黑黑 发表于 2024-5-10 21:09
你问问就知道了
往哪里问呢 绿叶清舟 发表于 2024-5-10 21:29
往哪里问呢
随便吧，东南西北没限制