天高几许问真龙

马黑黑 · 发表于 2024-5-10 12:08

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

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

x

马黑黑 · 发表于 2024-5-10 12:09

代码

<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[opt] > 0) {
ctx.fillStyle = `#${Math.random().toString(16).substr(-6)}`;
ctx.fillRect(x, y, skip - 1, skip - 1);
}
}
}
</script>

复制代码

马黑黑 · 发表于 2024-5-10 12:19

如果需要粒子阴影，请把 19 和 24 行的注释拿掉

各参数可以调整以做出不同的效果：

06 行代码 skip 变量：xy方向间隔多少个像素做检测，建议值 2 ~ 12；

09行代码：文本原始颜色；

12行代码：100px 是文本大小，建议值 30px 以上，太小的尺寸可能不合适做文字粒子化；

19~24行代码：粒子阴影，一楼效果未使用。若要使用，请去掉注释；

30行代码：粒子颜色。这里使用随机颜色。可以使用纯色，会有更清爽的效果；

31行代码：绘制矩形状的小粒子，xy是矩形左上角坐标，两个 skip - 1 是矩形宽高，这四个参数均可适当调整从而产生不同的效果（源于粒子的位置与大小）。

马黑黑 · 发表于 2024-5-10 12:52

本帖最后由马黑黑于 2024-5-10 13:53 编辑

实现思路：

按预定的像素间隔，纵横读取读取画布像素rgba信息，判断检测点颜色的alpha通道值，凡不为全透明的就在那里绘制矩形。

本例的初衷是做一个静态粒子化文本效果，但其实现方式可以作用于其他情形：若给画布加载图片或绘制其他任何图形，则画布上的图像也和文字一样被像素化。