个人中心
文章发布
退出
作者热门文章
- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用？
- database - RESTful URI 是否应该公开数据库主键？
25
4
我正在尝试使用 canvas 元素和 javascript 模拟 Matrix 代码雨。我可以一次让一个元素掉落，但不能让多个元素掉落。如何滴下多个矩阵雨滴。这是我的代码:
<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>
最佳答案
制作一堆独立的物体，它们都有自己的词、位置和速度。
然后将它们全部打印出来，并按它们的速度推进。
这里有一个简单的例子:
重要代码:
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);
关于javascript - 如何将另一个 Matrix 雨代码动画添加到我的 Canvas 动画中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9255496/
25
4
0
我是一名新的编程学生，我已经受困于一条指令很长一段时间了。我必须创建一个由 Nyan 猫下雨的动画(在某个方向，以随机旋转 Angular 等)。我尝试了很多东西，但我不知道如何在我的屏幕上添加随机数
我正在制作一个世界生成器，它将使用柏林噪声和有利于形成泛大陆形状岛屿的加权梯度生成地形。我已经到了可以创建世界温度图的地步，在该 map 中，靠近赤道的低海拔地区受到青睐，而且水总是更冷。但我无法找到
我是一名优秀的程序员,十分优秀！