Douche rectangulaire en toile HTML-Tutoriel H5-php.cn

Douche rectangulaire en toile HTML

大家讲道理

Libérer： 2017-05-28 10:40:48

original

1585 Les gens l'ont consulté

HTMLtoiledouche rectangulaire

exécuter sur toile
Obtenir l'environnement cartographique
Obtenir l'intégralité screen Largeur de l'écran et hauteur de l'écran
Déterminez la largeur de chaque texte pour déterminer la colonne
BoucleSortie
Minuterie Appel

Partie HTML

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>HTMLcanvas矩形阵雨</title></head><body><canvas id="c">您的浏览器不支持 请升级</canvas></body></html>

Copier après la connexion

Partie CSS

<style type="text/css">/* 基本的复位 */* {
    margin:0;
    padding:0;}/* 给body一个背景 使画布看起来更清晰 */body {
    background-color:#000;}canvas {
    display:block;}</style>

Copier après la connexion

Partie Javascript

<script type="text/jscript">
 var c = document.getElementById("c"); //获取id
 var ctx = c.getContext("2d"); //2d制图 
 c.width = window.innerWidth; //获取屏幕宽度 c.height = window.innerHeight; //获取屏幕高度
 
 var chinese = "abcdefghijklmnopqrstuvwxyz"; //canvas 阵雨文字 chinese = chinese.split(""); //split 分离
 
 var font_size = 10; //字体大小 10px
 var columns = c.width/font_size; 
 //获取列 屏幕宽度/字体大小
 var drops = []; // drop 落下 新建数组
 for(n=0; n < columns; n++) //控制列输出     drops[n] = 1; //draw
 function draw(){
     ctx.fillStyle = "rgba(0,0,0,0.05)"; //绘制矩形     ctx.fillRect(0,0,c.width,c.height); //以(0,0)为坐标 画制矩形     
     ctx.fillStyle = "#0F0"; //绿色字体     ctx.font = font_size + "px arial"; //以像素为单位 宋体
          
     for(var i=0; i< drops.length; i++)
     {         var text = chinese[Math.floor(Math.random()*chinese.length)];         // Math.floor 对浮点数向下取整         ctx.fillText(text, i*font_size, drops[i]*font_size);         // 规定在画布上输出的文本 开始绘制文本的x坐标 y坐标
         if(drops[i]*font_size > c.height && Math.random() > 0.975)         // 如果下落的文本大于屏幕高度 或者 随机数大于0.975             drops[i] = 0;         // 重置下落         drops[i]++;         // 继续执行     }
 }
 setInterval(draw,33); //33 执行一次draw()</script>

Copier après la connexion

Cet article se termine ici

Je le crois toujours Le monde est plein de beauté et d'espoir.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!