如何添加另一個矩陣雨代碼動畫到我的畫布動畫中？

我試圖模擬矩陣代碼雨與畫布元素和JavaScript。我能夠一次減少一個元素，但不能多個。我如何下降多個矩陣雨滴。這裏是我的代碼：如何添加另一個矩陣雨代碼動畫到我的畫布動畫中？

<html> 
    <head> 
     <title>Matrix Code Rain</title> 
     <style> 
      *{margin:0; padding:0; } 
      body{background:black;} 
     </style> 
    </head> 
    <body> 
     <canvas id="c"></canvas> 
     <script type="text/javascript"> 
      var canvas = document.getElementById("c"); 
      canvas.width = window.innerWidth; 
      canvas.height = window.innerHeight; 
      canvas.style.background = "black"; 
      var c = canvas.getContext("2d"); 
      var code = ["<html>","<p>","<b>","<strong>","<head>","<body>","<a>","<i>","<div>","<form>","<ol>","<li>","<ul>","<pre>","<nav>","<footer>","<header>","<article>","<section>","<em>","<style>","<title>","<meta>","<br>","<table>"]; 
      var rain = [ ]; 
      var max = 10; 
      for(var i = 0; i < max; i++){ 
       var drop = {}; 
       drop.code = Math.round(Math.random() * code.length); 
       drop.x = Math.random() * canvas.width; 
       drop.y = 0; 
       drop.size = Math.random() * 40; 
       drop.speed = drop.size/4; 
       rain.push(drop); 
      } 
      var y = 0; 
      c.fillStyle="lime"; 
      setTimeout(function(){ 
       c.clearRect(0,0,canvas.width,canvas.height); 
       for(var i = 0; i < max; i++){ 
        var drop = rain[i]; 
        c.font = drop.size+"pt arial"; 
        c.fillText(drop.code,drop.x,drop.y); 
        drop.y += drop.speed; 
        if(drop.y > canvas.height + drop.size) 
         drop.y = 0; 
       } 
      },1000/60); 
     </script> 
    </body> 
</html>

來源

2012-02-13 zachdyer

適合我嗎？你的意思是你想讓很多東西在同一時間下降？ – Alex 2012-02-13 10:00:48

@Alex不，我希望每次都有一個以上的人下降。在矩陣上多次下降。 – zachdyer 2012-02-13 19:45:38

我嘗試過使用Simons解決方案，但我不夠好，無法使其工作。我更新了我的代碼與西蒙的想法實施，但我沒有做對。 – zachdyer 2012-02-14 08:57:01

做一堆獨立的對象，所有的對象都得到自己的單詞，位置和速度。

然後將它們全部打印出來，並通過它們的速度提前。

這裏有一個清晰的例子給你：

http://jsfiddle.net/U5eFJ/

的重要代碼：

var code = ["<html>", "<p>", "<b>", "<strong>", "<head>", "<body>", "<a>", "<i>", "<div>", "<form>", "<ol>", "<li>", "<ul>", "<pre>", "<nav>", "<footer>", "<header>", "<article>", "<section>", "<em>", "<style>", "<title>", "<meta>", "<br>", "<table>"]; 

// make 90 things to fall with a random code element and random starting location 
var things = []; 
var THINGCOUNT = 90; 
for (var i = 0; i < THINGCOUNT; i++) { 
    var a = {}; 
    //randomly pick one tag 
    a.code = code[Math.round(Math.random() * code.length)]; 
    a.x = Math.random()*500; //random X 
    a.y = Math.random()*500 -500; // random Y that is above the screen 
    a.speed = Math.random()*10; 
    things.push(a); 
} 

setInterval(function() { 
    ctx.clearRect(0,0,500,500); 
    for (var i = 0; i < THINGCOUNT; i++) { 
     var a = things[i]; 
     ctx.fillText(a.code, a.x, a.y); 
     a.y += a.speed; // fall downwards by the speed amount 
     if (a.y > 600) a.y = -50; // if off the screen at bottom put back to top 
    } 
}, 90);

來源

2012-02-14 02:32:24

不錯。它所在的行是否表示var a = {}意味着等於新對象？ – zachdyer 2012-02-14 08:12:28

對不起，我是javascript新手。當我使用你的代碼時，它的效果很棒，但是當我嘗試在我的代碼中實現你的想法時，它不起作用。 – zachdyer 2012-02-14 08:54:36

我以錯誤的方式使用setTimeout。我想使用setInterval並使其工作。有人會推薦使用setTimeout還是有區別？ – zachdyer 2012-02-14 09:12:27

如果您運行的是Windows電腦就可以使Java腳本開放只是說這個.bat文件。 '@迴響模式1000 @color一個：甲回聲％的無規%%隨機%%隨機%%隨機%%隨機%%隨機%%隨機%%隨機%%隨機%%隨機%%隨機％％隨機%%隨機%%隨機%%隨機%%隨機%%隨機%%隨機%%隨機％轉到A」

這可能不是你想要什麼，但我希望它有助於=） `

來源

2015-05-29 10:51:38 TylerTotally

如何添加另一個矩陣雨代碼動畫到我的畫布動畫中？

回答

相關問題