预防暗裂有妙招，简单几步告别肌肤暗裂困扰

今天跟大家聊聊我最近在捣鼓的“暗裂”效果，这名字听起来玄乎，就是想让图片或者文字，看起来像是从内部裂开一样，有点那种赛博朋克的感觉。

一开始我琢磨着，这玩意儿应该用PS或者AE能做出来？结果搜了一圈，要么就是教程太复杂，要么就是效果不太理想，总觉得少了点内味儿。

我就寻思，要不自己撸一个？正好最近在学Canvas，就决定用Canvas来试试水。

我新建了一个HTML文件，里面放了一个Canvas标签，再搞点CSS样式，让Canvas居中显示，差不多就这样：

有了Canvas，接下来就是JavaScript部分了。我先获取Canvas的上下文，然后画了一个简单的矩形，作为“裂开”的对象。

javascript

const canvas = *('myCanvas');

const ctx = *('2d');

* = '#333';

*(50, 50, 400, 200);

关键来了，怎么做出裂缝的效果？我想到了用随机的线条来模拟裂缝，线条的颜色要比矩形稍微亮一点，这样才能突出裂缝。

我写了一个函数，用来生成随机的线条，线条的位置和角度都是随机的。

javascript

function drawCrack(x, y, length, angle) {

* = '#666';

* = 2;

*(x, y);

*(x + length *(angle), y + length *(angle));

然后，我在矩形内部随机生成一些裂缝，让它看起来像是真的要裂开一样。

javascript

for (let i = 0; i < 20; i++) {

const x = *() 400 + 50;

const y = *() 200 + 50;

const length = *() 50 + 20;

const angle = *() * 2;

drawCrack(x, y, length, angle);

这样，一个简单的“暗裂”效果就出来了，虽然看起来有点粗糙，但至少是个雏形。

我又加了一些细节，比如让裂缝的颜色稍微有点渐变，让裂缝的边缘有点模糊，还加了一些细小的颗粒，让效果更加逼真。

javascript

function drawCrack(x, y, length, angle) {

const gradient = *(x, y, x + length *(angle), y + length *(angle));

*(0, '#555');

*(1, '#777');

* = gradient;

* = 2;

* = 2;

* = '#000';

*(x, y);

*(x + length *(angle), y + length *(angle));

* = 0;

为了让效果更炫酷，我还加了一个鼠标交互，当鼠标移动到Canvas上时，裂缝会变得更加明显，好像是鼠标的力量让裂缝加速扩大一样。

javascript

*('mousemove', function(event) {

const rect = *();

const x = * - *;

const y = * - *;

// 清空画布

*(0, 0, *, *);

// 重新绘制矩形

* = '#333';

*(50, 50, 400, 200);

// 绘制裂缝

for (let i = 0; i < 20; i++) {

const crackX = *() 400 + 50;

const crackY = *() 200 + 50;

const length = *() 50 + 20;

const angle = *() * 2;

// 根据鼠标位置调整裂缝的亮度

const distance = *((x - crackX) (x - crackX) + (y - crackY) (y - crackY));

const brightness = *(0, 1 - distance / 200); // 距离越近，亮度越高

const gradient = *(crackX, crackY, crackX + length *(angle), crackY + length *(angle));

*(0, `rgba(85, 85, 85, ${brightness})`);

*(1, `rgba(119, 119, 119, ${brightness})`);

* = gradient;

* = 2;

* = 2;

* = '#000';

*(crackX, crackY);

*(crackX + length *(angle), crackY + length *(angle));

* = 0;

我还尝试把“暗裂”效果应用到文字上，原理差不多，就是先把文字绘制到Canvas上，然后再添加裂缝。

这回实践还是挺有意思的，虽然效果还不够完美，但至少让我对Canvas有了更深的了解，也让我体会到了自己动手创造的乐趣。以后有时间，我会继续完善这个效果，争取做出更酷炫的“暗裂”效果。