路子来源

• 一开始，想到画真龙下一百层...

• 但是，过程中遭受到了接二

• 连三的鼓励

最终决定做个《龙王变》（一如既往的水平稳定）

效果图

由于只有画面构思，不知道怎么实现思路，简单掘金一下，找到有一篇文章作为参考...
（参考文章：产品经理：你能不能用div给我画条龙？

思路和要点

1. 先获取图片的 ImageData 对象，主要为了获取该图片的像素数据。
2. 再通过点阵信息遍历该图片的像素数据，匹配对应颜色的进行替换想要的效果。
3. 封装了两个部分，一个部分是画点；一个是画图片；
4. 画点部分增加不同透明效果，并加上定时器，每秒变换一次，达到色差实现变化；

画点部分

    // 画点部分
    function drawCircle(x, y, radius, color = '#f00') {
        ctx.fillStyle = color
        ctx.beginPath();
        ctx.arc(x, y, radius, 0, 2 * Math.PI); 
        ctx.fill();
    };

画图部分

    // 画图部分
    function drawImage(url, x, y, w = 20, h = 20) {
        const img = new Image();
        img.crossOrigin = "anonymous";
        img.src = url;
        img.onload = () => {
            ctx.drawImage(img, x - w / 2, y - h / 2, w, h);
        };
    };

主要部分，遍历图片的像素数据，进行匹配和替换想要的效果。

function drawLattice(status) {
        var imageData = ctx.getImageData(0, 0, image.width, image.height).data;
        // console.log("图片信息获取", imageData)
        ctx.fillStyle = "#ffffff";
        ctx.fillRect(0, 0, image.width, image.height);
        var gap = 6;
        const colorCounter = {}
        let targetColorCount = 0
        for (var h = 0; h < image.height; h += gap) {
            for (var w = 0; w < image.width; w += gap) {
                var position = (image.width * h + w) * 4;
                const r = imageData[position];
                const g = imageData[position + 1];
                const b = imageData[position + 2];
                const colorKey = `${r},${g},${b}`
                // console.log(colorKey);
                colorCounter[colorKey] = colorCounter[colorKey] ? colorCounter[colorKey] + 1 : 1;
                if (marginName === "红闪闪") {
                    if (colorKey === '31,26,23' || (!isFirst && colorKey !== '255,255,255')) {
                        targetColorCount++
                        drawCircle(w, h, 4, `rgba(255,0,0,${Math.random()})`)
                    }
                } else if (marginName === "头像变") {
                    if (colorKey === "31,26,23") {
                        targetColorCount++;
                        const random = Math.round(Math.random() * 10000);
                        const imageUrl =
                            `https://p6-passport.byteacctimg.com/img/user-avatar/db3b09f9ca107d8843cee3fe8f4f0cd4~150x150.awebp`;
                        drawImage(imageUrl, w, h, 15, 15);
                    }
                }
            }

        }
        isFirst = false;
    }

仓库地址与体验地址

大家可以直接来笔者的网站来体验
在线体验（pc端）：体验传送门
仓库地址：暂无（想要的可以直接去扒笔者的网站传送门 ）

感谢

大帅老猿文章【产品经理：你能不能用div给我画条龙？】

文章小尾巴