如何添加另一个矩阵雨code动画我的画布动画？ [英] How do I add another Matrix rain code animation to my canvas animation?
本文介绍了如何添加另一个矩阵雨code动画我的画布动画？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图模拟的canvas元素和JavaScript矩阵code下雨。我能够做一次一个元素拖放但不是多。我如何删除多个矩阵雨滴。这里是我的code：
＆LT; HTML和GT;
＆LT; HEAD＆GT;
＆LT;标题＆GT;矩阵code＆雨LT; /标题＆GT;
＆LT;风格＆GT;
* {保证金：0;填充：0; }
身体{背景：黑色;}
＆LT; /风格＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT;帆布ID =C＆GT;＆LT; /帆布＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
VAR帆布=的document.getElementById（C）;
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.style.background =黑色;
变种C = canvas.getContext（2D）;
变量code = [\"<html>\",\"<p>\",\"<b>\",\"<strong>\",\"<head>\",\"<body>\",\"<a>\",\"<i>\",\"<div>\",\"<form>\",\"<ol>\",\"<li>\",\"<ul>\",\"<$p$p>\",\"<nav>\",\"<footer>\",\"<header>\",\"<article>\",\"<section>\",\"<em>\",\"<style>\",\"<title>\",\"<meta>\",\"<br>\",\"<table>\"];
变种雨= [];
变种最大= 10;
对于（VAR I = 0; I＆LT;最大;我++）{
变种滴= {};
降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（下降）;
}
变种Y = 0;
c.fillStyle =石灰;
的setTimeout（函数（）{
c.clearRect（0,0，canvas.width，canvas.height）;
对于（VAR I = 0; I＆LT;最大;我++）{
VAR降大雨= [I]
c.font = drop.size +PT宋体;
c.fillText（下跌code，drop.x，drop.y）;
drop.y + = drop.speed;
如果（drop.y＆GT; canvas.height + drop.size）
drop.y = 0;
}
}，1000年至1060年）;
＆LT; / SCRIPT＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
解决方案
请一堆独立的对象，所有获得自己的字和位置和速度。
然后全部打印出来，并通过自己的速度推进他们。
下面是给你一个清晰的例子：
重要code：
变量code = [＆LT; HTML＆gt;中，＆LT; P＆gt;中，＆LT; B＆gt;中，＆LT;强＆gt;中，＆LT;头＆gt;中，＆LT;身体GT;，＆LT; A＆gt;中，＆LT; I＆gt;中，＆LT; DIV＆gt;中，＆LT;形式＆gt;中，＆LT;醇＆gt;中，＆LT;李＆GT ;，＆所述; UL＆gt;中，＆所述; pre＆gt;中，＆所述;导览＆gt;中，＆所述;页脚＆gt;中，＆所述报头＆gt;中，＆lt;物品＆gt;中，＆所述;节＆gt;，＆LT; EM＆gt;中，＆LT;风格＆gt;中，＆LT;标题＆gt;中，＆LT;元＆gt;中，＆LT; BR＆gt;中，＆LT;表＆gt;];//做90件事落在一个随机code元素，并随机起始位置
变种东西= [];
VAR THINGCOUNT = 90;
对于（VAR I = 0; I＆LT; THINGCOUNT;我++）{
变种一个= {};
//随机选择一个标签
一个code = code [Math.round（的Math.random（）* code.length）。
a.x =的Math.random（）* 500; //随机点¯x
a.y =的Math.random（）* 500 -500; //随机y表示是在屏幕上方
a.speed =的Math.random（）* 10;
things.push（一）;
}的setInterval（函数（）{
ctx.clearRect（0,0,500,500）;
对于（VAR I = 0; I＆LT; THINGCOUNT;我++）{
VAR一个=东西[I]
ctx.fillText（一code，a.x，a.y）;
a.y + = a.speed; //由速度数量向下回落
如果（a.y＆在600）a.y = -50; //如果在关闭屏幕下方放回到顶部
}
}，90）;
I'm trying to simulate the Matrix code rain with the canvas element and javascript. I am able to make one element drop at a time but not multiple. How do I drop multiple matrix rain drops. Here is my code:
<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>
解决方案
Make a bunch of independent objects that all get their own word and position and speed.
Then print them all and advance them by their speed.
Here's a clean example for you:
The important code:
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);
这篇关于如何添加另一个矩阵雨code动画我的画布动画？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
