简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Maison
Article
Questions et réponses
Cours
Sujet
Télécharger
Jeu
Dictionnaire
mises à jour récentes

Maison  >  Article  >  interface Web  >  Douche rectangulaire en toile HTML

Douche rectangulaire en toile HTML

大家讲道理
大家讲道理original
2017-05-28 10:40:481572parcourir

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>

Partie CSS


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


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>

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Animation H5 - un exemple de progression en pourcentage de dessin sur toile d'un cercleArticle suivant：Animation H5 - un exemple de progression en pourcentage de dessin sur toile d'un cercle

Articles Liés

Voir plus