canvas实现渐变数字雨

最新推荐文章于 2021-01-16 18:47:22 发布

原谅8943

最新推荐文章于 2021-01-16 18:47:22 发布

阅读量803

点赞数 4

分类专栏： css 文章标签： canvas 代码数字雨渐变

本文链接：https://blog.csdn.net/HY200043/article/details/88795665

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

canvas实现渐变数字雨

在这里插入图片描述

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas width="1348" height="632" style="border:1px solid #000"></canvas>
<script>
    var can=document.getElementsByTagName("canvas")[0];
    var ctx=can.getContext("2d");
    var mW=can.width;
    var mH=can.height;
    var str="qwertyuiuoioppasdfgfghghjkjklklzxcxcvbvbnmnm123344556678789090qerdewgrtedjyutkytikmjhg,ihkuj.lioudgftdhgfjghkmjhgj,kjbvnfxsdgasfa";
    var arr=[];
    for(var i=0;i<str.length-1;i++){
        arr[i]=0;
    }
    var timer=setInterval(draw,60);
    function draw(){
        ctx.beginPath();
        ctx.fillStyle="rgba(0,0,0,0.09)"
        ctx.fillRect(0,0,mW,mH);

        ctx.beginPath();
        ctx.textAlign="center";
        ctx.textBaseline="middle";
        var mfont=12;
        ctx.font=""+mfont+" '楷体'";
        var line =  ctx.createLinearGradient(0, 0,mW,mH);
        line.addColorStop(0,"#f00");
        line.addColorStop(1,"#00f");
        ctx.fillStyle=line;
        for(var j=0;j<str.length-1;j++){
            ctx.fillText(str[parseInt(Math.random()*(str.length-1))],mfont*j,mfont*arr[j]++);
            if(mfont*arr[j]>mH && Math.random()<0.1){
                arr[j]=0;
            }
        }
    }

</script>
</body>
</html>