如何将另一个矩阵雨代码动画添加到我的画布动画中？
Posted
技术标签:
【中文标题】如何将另一个矩阵雨代码动画添加到我的画布动画中？【英文标题】：How do I add another Matrix rain code animation to my canvas animation? 【发布时间】：2012-03-04 13:23:57 【问题描述】：我正在尝试使用画布元素和 javascript 来模拟矩阵代码雨。我可以一次删除一个元素，但不能删除多个。如何滴下多个矩阵雨滴。这是我的代码：
<html>
<head>
<title>Matrix Code Rain</title>
<style>
*margin:0; padding:0;
bodybackground: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>
【问题讨论】：
对我有用吗？你的意思是你想要很多同时下降？ @Alex 不，我一次想要不止一个。像矩阵一样多次下降。 我尝试使用 Simons 解决方案，但我还不够好，无法让它发挥作用。我用 Simon 的想法更新了我的代码，但我做得不对。 【参考方案1】：制作一堆独立的物体，它们都有自己的单词、位置和速度。
然后将它们全部打印出来并按它们的速度前进。
这是一个干净的例子：
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);
【讨论】：
不错。它所说的 var a = 是否意味着等于新对象？ 抱歉，我是 javascript 新手。当我使用你的代码时，它的效果很棒，但是当我尝试在我的代码中实现你的想法时，它就不起作用了。 我以错误的方式使用 setTimeout。我想使用 setInterval 并使它起作用。有人会推荐使用 setTimeout 还是有区别？ 是的，var a = 只是创建了一个空对象。 setInterval 每 X 毫秒发生一次。 setTimeout 仅在 X 毫秒后发生一次
通常你想要 setInterval 因为你想一遍又一遍地做某事，而不仅仅是一次【参考方案2】：
如果您正在运行 Windows 计算机，您可以让 java 脚本打开一个 .bat 文件，上面写着这个。 `@echo 关闭 模式 1000 @颜色 ：一种 echo %random%%random%%random%%random%%random%%random%%random%%random%%random%%random%%random%%random%%random%%random%%random%%random%%随机%%随机%%随机% 转到 A'
这可能不是您想要的，但我希望它有所帮助 =) `
【讨论】：
以上是关于如何将另一个矩阵雨代码动画添加到我的画布动画中？的主要内容，如果未能解决你的问题，请参考以下文章
如何将动画 css 添加到我的 wordpress 主题中[重复]
将类似 Office 2013 的动画添加到我的 C# 应用程序