canvas 霓虹灯文字

503 阅读1分钟

我们之前说canvas样式的时候,说过霓虹灯的实现原理,将霓虹灯样式交给文字便是霓虹灯文字了。

霓虹灯文字可以应用于传统活动庆典、游戏厅、KTV等相关场景。

1

整体代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>霓虹灯</title>
    <style>
        html{height: 100%;overflow: hidden;}
        body{height: 100%;margin: 0;}
        #canvas{
            background: #000;
        }
    </style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
    const canvas=document.getElementById('canvas');
    //canvas充满窗口
    canvas.width=window.innerWidth;
    canvas.height=window.innerHeight;

    //画笔
    const  ctx=canvas.getContext('2d');

    //颜色数组
    const colors=['red','yellow'];

    //文字内容
    const text='劳动最光荣!';

    //文字对齐
    ctx.textAlign='left'
    ctx.textBaseline='middle'

    //字体属性
    ctx.font='bold 220px arial';

    //文字宽度
    const {width}=ctx.measureText(text)

    //文字位置
    const [x,y]=[(canvas.width-width)/2,canvas.height/2];

      //绘制文字
    function drawText(text,textX=0,textY=0,i1=0,i2=1){
        //保存上下文对象的状态
        ctx.save();
        //设置描边样式
        ctx.strokeStyle=colors[i1];
        //设置描边宽度
        ctx.lineWidth=3;
        //虚线
        ctx.setLineDash([8]);
        //以描边的方式显示路径
        ctx.strokeText(text,textX,textY);
        //第二部分虚线
        ctx.lineDashOffset=8;
        ctx.strokeStyle=colors[i2];
        //光晕
        ctx.shadowColor='orange';
        //多画几遍光晕
        for(let i=25;i>0;i-=2){
            ctx.shadowBlur=i;
            ctx.strokeText(text,textX,textY);
        }
        //将上下文对象的状态恢复到上一次保存时的状态
        ctx.restore();
    }

    //渲染
    function render(){
        for(let i=0;i<text.length;i++){
            drawText(text[i],i*220+x,y,i%2,(i+1)%2);
        }
    }

    /*连续渲染*/
    let t1=0
    !(function ani(t){
        const t2=t%200
        if(t1>t2){
            colors.reverse();
            ctx.clearRect(0,0,canvas.width,canvas.height)
            render()
        }
        t1=t2
        requestAnimationFrame(ani)
    })()
</script>
</body>
</html>