canvas,文字雨效果

最新推荐文章于 2023-12-21 19:34:45 发布

圆溜溜大西瓜

最新推荐文章于 2023-12-21 19:34:45 发布

阅读量219

点赞数

CC 4.0 BY-SA版权

文章标签：前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_43385164/article/details/129733249

 var canvas = document.getElementById("myCanvas");
    //获取宽度和高度
    var j = 0
    var dd = canvas.getBoundingClientRect();
    var cth = dd.height; //盒子高度
    var ctw = dd.width; //盒子宽度
    var fontSize = 20; //文字大小
    var num1 = Math.floor(ctw / fontSize); //每行能显示的文字数量
    var charIndex = [] // y轴随机数
    for(let s = 0;s<num1;s++){
      charIndex.push(Math.floor(Math.random()*10))
    }
    var num2 = Math.floor(cth / fontSize);
    function draw(y) {
      var ctx = canvas.getContext("2d");
      //颜色透明度
      ctx.fillStyle = "rgba(0,0,0,0.1)";
      ctx.fillRect(0, 0, ctw, cth);
      ctx.fillStyle = "#64cae4";
      //设置字体大小
      ctx.font = "20px Arial";
      ctx.textBaseline = "top";
      for (var i = 0; i < num1; i++) {
        var tetx = getStrRandom()
        let x = i * fontSize;
        let y = charIndex[i] * fontSize
        ctx.fillText(tetx, x, y);
        if(y>cth){
          charIndex[i] = 0
        }else{
          charIndex[i] ++ 
        }
      }
    }
    // 随机字符
    function getStrRandom(){
      var str = '君不见黄河之水天上来奔流到海不复回君不见高堂明镜悲白发朝如青丝暮成雪人生得意须尽欢莫使金樽空对月天生我材必有用千金散尽还复来烹羊宰牛且为乐会须一饮三百杯岑夫子丹丘生将进酒杯莫停与君歌一曲请君为我倾耳听钟鼓馔玉不足贵但愿长醉不愿醒古来圣贤皆寂寞惟有饮者留其名陈王昔时宴平乐斗酒十千恣欢谑主人何为言少钱径须沽取对君酌五花马千金裘呼儿将出换美酒与尔同销万古愁'
      return str[Math.floor(Math.random() * str.length)]
    }
  setInterval(()=>{
      draw();
  },100)