溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

JavaScript canvas仿代碼流瀑布

發(fā)布時(shí)間：2020-08-25 13:41:06 來源：腳本之家 閱讀：124 作者：crazy的藍(lán)色夢(mèng)想 欄目：web開發(fā)

本文實(shí)例為大家分享了canvas仿代碼流瀑布的具體代碼，供大家參考，具體內(nèi)容如下

JavaScript canvas仿代碼流瀑布

在js部分寫canvas代碼，有詳細(xì)注釋

html部分：

一個(gè)canvas元素：

<canvas id="canvas" ></canvas>

css部分：

<style>
  *{
   padding: 0;
   margin: 0;
  }
  canvas{
   background-color: #111;
  }
  body{
   overflow: hidden;
  
  }
</style>
<script>
  var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');
  // 獲取瀏覽器的寬度和高度
  var w = window.innerWidth;
  var h = window.innerHeight;
  // 設(shè)置canvas的寬高
  canvas.width = w;
  canvas.height = h;
  // 每個(gè)文字的大小
  var fontSize = 16;
  // 一共可以有多少列文字
  var col = Math.floor(w / fontSize);
  // 記錄每列文字的y軸坐標(biāo)
  var cpy = [];
  for(var i = 0;i< col; i++)
  {
   cpy[i] = 1;
  }
  //定義文字
  var str = "Javascriphafhsdhfsfsf{}";
  // 繪制
  draw();
  setInterval(draw,30);
  function draw(){
   context.beginPath();
   // 背景填充顏色
   context.fillStyle = "rgba(0,0,0,0.05)";
   context.fillRect(0,0,w,h);
   // 設(shè)置字體大小
   context.font = fontSize +"px bold 微軟雅黑 ";
   // 設(shè)置字體顏色
   context.fillStyle = "#00cc33";
   for(var i = 0; i < col;i++)
   {
    var index = Math.floor(Math.random()*str.length);
    var x = i*fontSize;
    var y = cpy[i]*fontSize;
    context.fillText(str.charAt(index),x,y);
    if(y >= h && Math.random()> 0.99)// 出現(xiàn)時(shí)間延遲的效果
    {
     cpy[i]=0;// 只要Math.random> 0.99 時(shí)才縱坐標(biāo)從0開始寫字
    }
    cpy[i]++;// 數(shù)組值加一，以便下一次寫的字在下面一行
   }
  }
</script>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手