10.画像素动态文字

xsijisw21

已于 2023-07-02 17:40:46 修改

阅读量66

点赞数

分类专栏： # canvas 文章标签： javascript 前端开发语言

于 2022-05-30 09:05:46 首次发布

本文链接：https://blog.csdn.net/xsijisw21/article/details/125040289

版权

canvas 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="startX-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*  #can {
            border: 1px red solid;
    }
    */
    </style>
</head>

<body>
    <canvas id="can" width="400px" height="500px">
</canvas>
    <script>
        let canvas = document.querySelector('#can');
        let c = canvas.getContext('2d');
        let w = 400,
            h = 500;
        let time = 100;
        //=============
        function r(num) {
            return parseInt(Math.random() * num);
        }
        // 小球类
        function Bull(xEnd, yEnd) {
            //(startX,startY),(xEnd,yEnd)
            this.startX = r(w);
            this.startY = r(h);
            this.xEnd = xEnd;
            this.yEnd = yEnd;
            // 生成随机的速度
            this.speedX = (this.xEnd - this.startX) / time;
            this.speedY = (this.yEnd - this.startY) / time;
            //小球运动的中心点
            this.x = this.startX;
            this.y = this.startY;
        }
        // 让小球显示出来
        Bull.prototype.show = function() {
            this.x += this.speedX;
            this.y += this.speedY;
            drawCircle(this.x, this.y, 1, 'red')
        }

        //==========



        drawText("六一节日快乐！", w / 2, h / 6);
        // 想画一个粒子的效果
        // 1：获取像素点
        let copy = c.getImageData(0, 0, w, h);
        // 2.清除画布
        c.clearRect(0, 0, w, h)
            // 3.筛选有效的像素点
        let leap = 3; //像素之间的间隔
        let barArray = [];
        for (let y = 0; y < h; y += leap) {
            for (let x = 0; x < w; x += leap) {
                let index = x + y * w;
                let a = copy.data[index * 4 + 3];
                if (a > 128) {
                    let bar = new Bull(x, y);
                    barArray.push(bar);
                    bar.show()
                }
            }

        }
        // 让小球动起来
        let sum = 0;
        let timer = setInterval(function() {
            sum++;
            // 清除画布
            c.clearRect(0, 0, w, h);
            for (let i = 0; i < barArray.length; i++) {
                barArray[i].show();
            }
            if (sum >= time - 1) {
                clearInterval(timer)
            }
        }, 30)

        // 画圆
        function drawCircle(x, y, r, color) {
            c.beginPath()
            c.fillStyle = color;
            c.arc(x, y, r, 0, 2 * Math.PI)
            c.fill()
        }

        // 画文字
        function drawText(text, x, y) {
            c.font = '50px 微软雅黑';
            c.textAlign = 'center';
            // c.textBaseline = 'middle';
            c.fillText(text, x, y, w)
        }
    </script>
</body>

</html>