利用JavaScript畫布實現(xiàn)代碼下墜效果-創(chuàng)新互聯(lián)

利用JavaScript畫布實現(xiàn)代碼下墜效果？相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

創(chuàng)新互聯(lián)專注于措美網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。熱誠為您提供措美營銷型網(wǎng)站建設(shè)，措美網(wǎng)站制作、措美網(wǎng)頁設(shè)計、措美網(wǎng)站官網(wǎng)定制、小程序開發(fā)服務(wù)，打造措美網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供措美網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。創(chuàng)新互聯(lián)建站專注于和布克賽爾蒙古網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。熱誠為您提供和布克賽爾蒙古營銷型網(wǎng)站建設(shè)，和布克賽爾蒙古網(wǎng)站制作、和布克賽爾蒙古網(wǎng)頁設(shè)計、和布克賽爾蒙古網(wǎng)站官網(wǎng)定制、小程序制作服務(wù)，打造和布克賽爾蒙古網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供和布克賽爾蒙古網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。創(chuàng)新互聯(lián)公司專注于洛南網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。熱誠為您提供洛南營銷型網(wǎng)站建設(shè)，洛南網(wǎng)站制作、洛南網(wǎng)頁設(shè)計、洛南網(wǎng)站官網(wǎng)定制、小程序開發(fā)服務(wù)，打造洛南網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供洛南網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

效果圖

利用JavaScript畫布實現(xiàn)代碼下墜效果

完整代碼

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    *{
      padding:0;
      margin:0;
    }
    body{
      overflow: hidden;
    }
  </style>
</head>
<body>
    <canvas id="mom" ></canvas>
  <script>
   window.onload = function(){
    //獲取畫布對象
    var canvas = document.getElementById("mom");
    //獲取畫布的上下文
    //getContext() 方法返回一個用于在畫布上繪圖的環(huán)境。
    var context =canvas.getContext("2d");
    //獲取瀏覽器屏幕的寬度和高度
    var W = window.innerWidth;
    var H = window.innerHeight;
    //設(shè)置canvas的寬度和高度
    canvas.width = W;
    canvas.height = H;
    //每個文字的字體大小
    var fontSize = 16;
    //計算列
    var colunms = Math.floor(W /fontSize);
    //記錄每列文字的y軸坐標
    var drops = [];
    //給每一個文字初始化一個起始點的位置
    //計算每一個文字所謂坐標 存儲y軸的坐標 
    for(var i=0;i<colunms;i++){
      drops.push(0);
    }
    //運動的文字
    var str ="JavaScript function(){}";
    //4:fillText(str,x,y);原理就是去更改y的坐標位置
    //繪畫的函數(shù)
    function draw(){
      context.fillStyle = "rgba(0,0,0,0.05)";
      //fillRect() 方法繪制“已填色”的矩形。默認的填充顏色是黑色。
      context.fillRect(0,0,W,H);
      //給字體設(shè)置樣式
      context.font = "700 "+fontSize+"px 微軟雅黑";
      //給字體添加顏色
      context.fillStyle ="#00cc33";//可以rgb,hsl, 標準色，十六進制顏色
      //寫入畫布中
      for(var i=0;i<colunms;i++){
        var index = Math.floor(Math.random() * str.length);//設(shè)置文字出發(fā)時間隨機 Math.floor(Math.random()*str.length)讓數(shù)組里面的文字索引隨機出現(xiàn) 
        var x = i*fontSize;
        var y = drops[i] *fontSize;//也讓y軸方向也向下掉一個文字的距離
        context.fillText(str[index],x,y);
        // //如果要改變時間，肯定就是改變每次他的起點
        if(y >= canvas.height && Math.random()>0.99){
          drops[i] = 0;
        }
        drops[i]++;//讓數(shù)組里面的值每次加一，用于上面的y軸下掉 
      }
    };
    //隨機顏色
    function randColor(){
      var r = Math.floor(Math.random() * 256);
      var g = Math.floor(Math.random() * 256);
      var b = Math.floor(Math.random() * 256);
      return "rgb("+r+","+g+","+b+")";
    }
    draw();
    setInterval(draw,20);
  };
  </script>
</body>
</html>

網(wǎng)頁標題：利用JavaScript畫布實現(xiàn)代碼下墜效果-創(chuàng)新互聯(lián)
分享鏈接：http://www.rwnh.cn/article20/cehsco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、App設(shè)計、電子商務(wù)、網(wǎng)站設(shè)計、網(wǎng)站改版、品牌網(wǎng)站制作

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

内射老阿姨1区2区3区4区_久久精品人人做人人爽电影蜜月_久久国产精品亚洲77777_99精品又大又爽又粗少妇毛片

利用JavaScript畫布實現(xiàn)代碼下墜效果-創(chuàng)新互聯(lián)