canvas艺术字-扩展-闪烁效果

最新推荐文章于 2025-11-18 11:56:27 发布

原创最新推荐文章于 2025-11-18 11:56:27 发布 · 1.1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#canvas

JS 同时被 2 个专栏收录

61 篇文章

订阅专栏

canvas

25 篇文章

订阅专栏

本文介绍了如何使用HTML5 Canvas创建艺术字并实现闪烁效果。通过结合路径绘制、颜色变化和定时器，使得文字在页面上产生动态的闪烁动画，为网页增添视觉吸引力。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas艺术字-扩展</title>
    <style>
        html{height: 100%;overflow: hidden;}
        body{height: 100%;margin: 0;}
        #test{
            background: #000;
        }
    </style>
</head>
<body>
    <canvas id="test"></canvas>
    <script>
        const cvs=document.getElementById('test');
        //canvas充满窗口
        cvs.width=window.innerWidth;
        cvs.height=window.innerHeight;
        //画笔
        const  ctx=cvs.getContext('2d');
    
        //颜色数组
        const colors=['red','yellow'];
    
        /*文字内容*/
        const text='学习最高尚';
    
        /*文字位置*/
        const [x,y]=[600,600];
    
        //字体属性
        ctx.font='bold 220px arial';
    
        function draw(){
            //保存上下文对象的状态
            ctx.save();
            //设置描边样式
            ctx.strokeStyle=colors[0];
            //设置描边宽度
            ctx.lineWidth=3;
            //虚线
            ctx.setLineDash([8]);
            //以描边的方式显示路径
            ctx.strokeText(text,x,y);
            //第二部分虚线
            ctx.lineDashOffset=8;
            ctx.strokeStyle=colors[1];
            //光晕
            ctx.shadowColor='orange';
            //多画几遍光晕
            for(let i=25;i>3;i-=2){
                ctx.shadowBlur=i;
                ctx.strokeText(text,x,y);
            }
            //将上下文对象的状态恢复到上一次保存时的状态
            ctx.restore();
        }
    
        draw();
    
        setInterval(function(){
            ctx.clearRect(0,0,cvs.width,cvs.height);
            draw();
            colors.reverse();
        },500)
    </script>   
</body>
</html>