Fatal编程技术网
  • javascript/
  • Javascript 如何将另一个矩阵雨代码动画添加到画布动画？

Javascript 如何将另一个矩阵雨代码动画添加到画布动画？

javascript html animation canvas

Javascript 如何将另一个矩阵雨代码动画添加到画布动画？,javascript,html,animation,canvas,Javascript,Html,Animation,Canvas,我试图用canvas元素和javascript模拟矩阵代码rain。我可以一次滴下一个元素，但不能多次滴下。如何滴下多个矩阵雨滴。这是我的密码： <html> <head> <title>Matrix Code Rain</title> <style> *{margin:0; padding:0; } body{background:black

我试图用canvas元素和javascript模拟矩阵代码rain。我可以一次滴下一个元素，但不能多次滴下。如何滴下多个矩阵雨滴。这是我的密码：

   <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>


矩阵码雨
*{边距：0；填充：0；}
正文{背景：黑色；}
var canvas=document.getElementById（“c”）；
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
canvas.style.background=“黑色”；
var c=canvas.getContext（“2d”）；
变量代码=[；
var雨=[]；
var max=10；
对于（变量i=0；icanvas.height+drop.size）
下降y=0；
}
},1000/60);
制作一组独立的对象，它们都有自己的单词、位置和速度

然后将它们全部打印出来，并根据它们的速度进行升级

下面是一个清晰的例子：

重要代码：

var-code=[“”，“”，“”，“；
//使用随机代码元素和随机起始位置使90件物品落下
var事物=[]；
var THINGCOUNT=90；
对于（变量i=0；i600）a.y=-50；//如果离开屏幕底部，则放回顶部
}
}, 90);
​
​

如果您运行的是windows计算机，您可以让java脚本打开一个.bat文件，该文件就是这样写的。 `@回音 模式1000 @颜色a ：A echo%random%%random%%random%%random%%random%%random%%random%%random%%random%%random%%random%%random%%random%%random%%random%%random%%random%%random%% 转到A'

这可能不是您想要的，但我希望它能有所帮助=）
`

对我有用吗？你的意思是你想同时投很多球？@Alex不，我想一次投多个球。我试着使用Simons的解决方案，但我还不够好，无法让它工作。我用Simon idea更新了我的代码，但是我做得不对。很好。是不是说var a={}表示一个等于新对象的行？对不起，我是javascript新手。当我使用你的代码时，它非常棒，但是当我试图在代码中实现你的想法时，它不起作用。我想使用setInterval，这使它工作起来。有人建议使用setTimeout吗？或者有什么区别吗？是的，
var a={}
只是创建一个空对象<代码>设置间隔每X毫秒发生一次
setTimeout
只发生一次，在X毫秒之后，通常您需要setInterval，因为您希望反复执行某项操作，而不是只执行一次 
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);
​