我在codePen上找到了這個例子，
當字母在一行中移動時第一次迭代看起來很糟糕，
是否可以從一開始就從不同的位置開始移動列？（不是從第二次迭代開始）
我的解決方案也很糟糕：
我添加了不透明度為 0 到 100 的 @keyframes
并添加了持續時間為 3s 的影片和 animation-timing-function: step-end;
// geting canvas by Boujjou Achraf
var c = document.getElementById("c");
var ctx = c.getContext("2d");
//making the canvas full screen
c.height = window.innerHeight;
c.width = window.innerWidth;
//chinese characters - taken from the unicode charset
var matrix = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ123456789@#$%^&*()*&^% -/~{[|`]}";
//converting the string into an array of single characters
matrix = matrix.split("");
var font_size = 10;
var columns = c.width/font_size; //number of columns for the rain
//an array of drops - one per column
var drops = [];
//x below is the x coordinate
//1 = y co-ordinate of the drop(same for every drop initially)
for(var x = 0; x < columns; x )
drops[x] = 1;
//drawing the characters
function draw()
{
//Black BG for the canvas
//translucent BG to show trail
ctx.fillStyle = "rgba(0, 0, 0, 0.04)";
ctx.fillRect(0, 0, c.width, c.height);
ctx.fillStyle = "#f4427d";//green text
ctx.font = font_size "px arial";
//looping over drops
for(var i = 0; i < drops.length; i )
{
//a random chinese character to print
var text = matrix[Math.floor(Math.random()*matrix.length)];
//x = i*font_size, y = value of drops[i]*font_size
ctx.fillText(text, i*font_size, drops[i]*font_size);
//sending the drop back to the top randomly after it has crossed the screen
//adding a randomness to the reset to make the drops scattered on the Y axis
if(drops[i]*font_size > c.height && Math.random() > 0.975)
drops[i] = 0;
//incrementing Y coordinate
drops[i] ;
}
}
setInterval(draw, 35);/* By Boujjou Achraf*/
/*basic reset */
*{
margin: 0;
padding: 0;
}
body {background: black;}
canvas {display:block;}/* By Boujjou Achraf*/
<html>
<head>
</head>
<body>
<canvas id="c"></canvas>
</body>
</html>uj5u.com熱心網友回復：
每個影片字母的垂直螢屏位置存盤在一個名為drops.
在啟動時，每個字母通過以下兩行獲得相同的初始位置：
for (var x = 0; x < columns; x )
drops[x] = 1;
您可以通過將上面的內容更改為以下內容，使每個字母的位置成為從 0 到畫布元素高度的亂數：
for (var x = 0; x < columns; x )
drops[x] = parseInt(Math.random() * c.height);
Math.random()回傳一個介于 0 和 1 之間的浮點數并回傳元素c.height的高度。<canvas>通過將這兩個值相乘，我們得到一個介于 0 和畫布高度之間的亂數。
這是您修改后的示例：
var c = document.getElementById("c");
var ctx = c.getContext("2d");
//making the canvas full screen
c.height = window.innerHeight;
c.width = window.innerWidth;
//chinese characters - taken from the unicode charset
var matrix = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ123456789@#$%^&*()*&^% -/~{[|`]}";
//converting the string into an array of single characters
matrix = matrix.split("");
var font_size = 10;
var columns = c.width / font_size; //number of columns for the rain
//an array of drops - one per column
var drops = [];
//x below is the x coordinate
//1 = y co-ordinate of the drop(same for every drop initially)
for (var x = 0; x < columns; x )
drops[x] = parseInt(Math.random() * c.height);
//drawing the characters
function draw() {
//Black BG for the canvas
//translucent BG to show trail
ctx.fillStyle = "rgba(0, 0, 0, 0.04)";
ctx.fillRect(0, 0, c.width, c.height);
ctx.fillStyle = "#f4427d"; //green text
ctx.font = font_size "px arial";
//looping over drops
for (var i = 0; i < drops.length; i ) {
//a random chinese character to print
var text = matrix[Math.floor(Math.random() * matrix.length)];
//x = i*font_size, y = value of drops[i]*font_size
ctx.fillText(text, i * font_size, drops[i] * font_size);
//sending the drop back to the top randomly after it has crossed the screen
//adding a randomness to the reset to make the drops scattered on the Y axis
if (drops[i] * font_size > c.height && Math.random() > 0.975)
drops[i] = 0;
//incrementing Y coordinate
drops[i] ;
}
}
setInterval(draw, 35);* {
margin: 0;
padding: 0;
}
body {
background: black;
}
canvas {
display: block;
}<canvas id="c"></canvas>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/416915.html
標籤：
上一篇：更改svg動態樣式組件的填充顏色
下一篇：在flex結構中添加分組標簽