欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js+canvas實(shí)現(xiàn)代碼雨效果

 更新時(shí)間：2021年06月30日 08:37:11   作者：雕琢?xí)r光紙戇  
這篇文章主要為大家詳細(xì)介紹了js+canvas代碼雨效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js+canvas代碼雨效果的具體代碼，供大家參考，具體內(nèi)容如下

代碼：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
  <style type="text/css">
   *{
    margin: 0px;
    padding: 0px;
   }
   html,body{
    height: 100%;
    width: 100%;
   }
   #canvas{
    display: block;
   }
  </style>
 </head>
 <body>
  <canvas id="canvas"></canvas>
  <script type="text/javascript">
   var canvas = document.getElementById('canvas')
   var c= canvas.getContext('2d')
   var cw = canvas.width = window.innerWidth
   var ch = canvas.height = window.innerHeight 
   
   var str = [1,2,3,4,5,6,7,8,9,0,'q','w','e','r','t','y','u','i','a','c','d','f','g','h','j','l']
   var init = function(){
    this.x = Math.random()*cw
    this.y = 0
    this.content1 =Math.random()*15 
    this.speed = Math.random()*5+20
    this.add = function(){
     this.y+=this.speed
    }
    this.reset1 = function(){
     this.x= Math.random()*cw
     this.y = 0
    }
   }
   //定義一個(gè)隨機(jī)色
   var gl = c.createLinearGradient(0, 0, cw, ch);
       gl.addColorStop(0, 'red');
       
       gl.addColorStop(.5, 'yellow');
       
       gl.addColorStop(1, 'cyan');
   
   var arr=[]
   for(var i=0;i<20;i++){
    arr.push(new init())
   }
   setInterval(function(){
    
    c.fillStyle = 'rgba(0,0,0,0.05)'
    c.fillRect(0,0,cw,ch)
    //上面的兩句是給一個(gè)背景，放在計(jì)時(shí)器里面是為了每運(yùn)行一次，就重新繪畫(huà)一次
    //用來(lái)清空好畫(huà)布
    //1,yong rgba()來(lái)表示顏色是為了給一個(gè)透明度，新畫(huà)上去的畫(huà)布沒(méi)有完全覆蓋
    //以前的畫(huà)布，所以有個(gè)漸變的效果
    
    for(var i=0;i<arr.length;i++){
     c.fillStyle = gl
     c.font = '30px 微軟雅黑'
     
     c.fillText(str[i],arr[i].x,arr[i].y)
     
     //讓他落到底部再回來(lái)
     if(arr[i].y>ch-20){
      arr[i].reset1()
     }
     arr[i].add()
    }
    
    
    //
   },1000/60)
  </script>
 </body>
</html>

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

相關(guān)文章

  • 關(guān)于頁(yè)面嵌入swf覆蓋div層的問(wèn)題的解決方法

    關(guān)于頁(yè)面嵌入swf覆蓋div層的問(wèn)題的解決方法

    這篇文章主要介紹了關(guān)于頁(yè)面嵌入swf覆蓋div層的問(wèn)題的解決方法,需要的朋友可以參考下
    2014-02-02
  • JavaScript創(chuàng)建對(duì)象方法實(shí)例小結(jié)

    JavaScript創(chuàng)建對(duì)象方法實(shí)例小結(jié)

    這篇文章主要介紹了JavaScript創(chuàng)建對(duì)象方法,結(jié)合實(shí)例形式總結(jié)了javascript創(chuàng)建對(duì)象的基本原理及使用工廠模式、構(gòu)造函數(shù)模式與原型模式創(chuàng)建對(duì)象的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
    2018-09-09
  • Echarts圖表位置調(diào)整的圖文教程

    Echarts圖表位置調(diào)整的圖文教程

    實(shí)際過(guò)程中你會(huì)發(fā)現(xiàn)圖表在div中的位置不太理想,這時(shí)怎么去調(diào)整呢?下面這篇文章主要給大家介紹了關(guān)于Echarts圖表位置調(diào)整的相關(guān)資料,需要的朋友可以參考下
    2022-10-10
  • 微信小程序全局配置及常用配置項(xiàng)詳解

    微信小程序全局配置及常用配置項(xiàng)詳解

    微信小程序中我們創(chuàng)建頁(yè)面時(shí)會(huì)自動(dòng)創(chuàng)建四個(gè)文件分別為js文件,wxml文件wxss文件最后還有我們今天的主角配置文件,下面這篇文章主要給大家介紹了關(guān)于微信小程序全局配置以及常用配置項(xiàng)的相關(guān)資料,需要的朋友可以參考下
    2022-11-11
  • js控制多圖左右滾動(dòng)切換效果代碼分享

    js控制多圖左右滾動(dòng)切換效果代碼分享

    這篇文章主要介紹了js控制多圖左右滾動(dòng)切換效果，很實(shí)用的代碼，推薦給大家，有需要的小伙伴可以參考下。
    2015-08-08

    • 最新評(píng)論