canvas 文字灯光环绕粒子闪烁效果简单实例

最新推荐文章于 2022-07-05 13:20:13 发布

wangshang1320

最新推荐文章于 2022-07-05 13:20:13 发布

阅读量1.3k

点赞数

分类专栏： canvas JavaScript

本文链接：https://blog.csdn.net/wangshang1320/article/details/90731083

版权

JavaScript 同时被 2 个专栏收录

39 篇文章 0 订阅

订阅专栏

canvas

4 篇文章 1 订阅

订阅专栏

利用canvas 的putImageData和getImageData 写了个文字环绕跑马灯效果

效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
        }
    </style>
</head>
<body>
<canvas height="300" width="500" id="PT"></canvas>
</body>
<script>

    let ptDom = document.getElementById('PT');
    let ctx = ptDom.getContext('2d');
    let imageData = {};
    ctx.fillStyle= '#000';
    ctx.fillRect(0,0,ptDom.width,ptDom.height);

    function drawText() {
        ctx.fillStyle = '#000';
        ctx.strokeStyle = '#fff';
        ctx.font = '50px Verdana';
        ctx.strokeText('Hello world',80,80);
        ctx.save();
    }
    function random() {
        return Math.random()*255;
    }
    function getData() {
        return ctx.getImageData(0,0,500,300);
    }
    function drawParticle(){
        for (let  i = 0; i < imageData.data.length; i+=4) {
            let r =  imageData.data[i];
            let g =  imageData.data[i+1];
            let b =  imageData.data[i+2];
            if(r||g||b){

                imageData.data[i] = random();
                imageData.data[i+1] = random();
                imageData.data[i+2] = random();
            }
        }
        ctx.putImageData(imageData,0,0);
    }

    drawText();
    imageData= getData();
    setInterval(function () {
        drawParticle();
    },100)

</script>
</html>

getImageData 获取到的是画布的像素集合imageData，其中Uint8ClampedArray数组中4个元素为一个像素点的颜色描述，第一个是R，第二个是G，第三个是B，第四个是A，取值是0-255八进制，循环修改像素点的颜色以达到想要的效果，然后用putImageData重新填充画布。