canvas 绘制文字图片效果

效果图

微信截图_20220822093501.png
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            #canvas {
                border: 1px solid #eee;
            }
        </style>
    </head>
    <body>
        <canvas id="canvas" width="800" height="800"></canvas>
    </body>
</html>
<script>
    // 文字
    let text = '祝大家';
    // 文字的尺寸
    let fontSize = 150;
    // 文字放大的比例
    let proportion = 1.5;
    // 粒子数组
    const particles = [];
    
    // 随机的图片
    let imgUrl = ['./images/test.png', './images/22cu612ucen.jpg', './images/25swg975dk1.jpg', './images/oMgEH5ratCnw7cFwzJu71u2IrkRk.jpg'];
    
    class Particle{
        constructor(options = {}) {
            const { x = 0, y = 0, color = '#f00', image = '' } = options;
            this.x = x;
            this.y = y;
            this.image = image;
        }
        draw(ctx) {
            let image = new Image();
            image.crossOrigin = 'anonymous'
            image.src = this.image;
            image.onload = () => {              
                ctx.drawImage(image, this.x, this.y, 10, 10);
            }
        }
    }
    init();
    function init() {
        let canvas = document.getElementById('canvas');
        
        let canvasW = canvas.width;
        let canvasH = canvas.height;
        
        let ctx = canvas.getContext('2d');
        ctx.textAlign = 'left';
        ctx.textBaseline = 'top';
        ctx.font = `${fontSize}px Verdana`;
        ctx.fillText(text, 0, 0, 500);
        
        // 获取文字的高度
        let textW = ctx.measureText(text).width;
        // 获取文字的像素点
        let imageData = ctx.getImageData(0,0, textW, fontSize);
        
        // h和w + 8 设置粒子的密集程度
        for (let h = 0; h < fontSize; h = h + 8) {
            for (let w = 0; w < textW; w = w + 8) {
                let opacityIndex = (w + h * textW) * 4 + 3;
                if (imageData.data[opacityIndex] > 0) {
                    particles.push(new Particle({
                        x: w*proportion,
                        y: h*proportion,
                        image: imgUrl[Math.round(Math.random()*3)],
                    }));
                }
            }
        }
        // 设置canvas 原点坐标位置
        ctx.translate(0, 300);
        for (const particle of particles) {
            particle.draw(ctx);
        }
    }
</script>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容