Terinspirasi dari filem The Matrix, sebuah efek teks menjadi salah satu efek yang paling dikenali pada awal tahun 2000.
Contoh
Kesan teks Matrix sering dikaitkan dengan penggodaman dan pengetahuan komputer yang meluas. Wbagaimanapun, kesan teks 'Matrix' di sini hanya animasi teks, tidak menghacking atau menggodam.
HTML view ▼
<body onload="init();" style="margin: 0; padding: 0; background-color: #111111;">
<canvas id="canvas" width="810" height="600" style="margin: 0 auto;"></canvas>
</body>
<script>
var tileSize = 20;
var fadeFactor = 0.08;
var canvas;
var ctx;
var columns = [];
var maxStackHeight;
function init()
{
canvas = document.getElementById( 'canvas' );
ctx = canvas.getContext( '2d' );
initMatrix();
tick();
}
function initMatrix()
{
maxStackHeight = Math.ceil(canvas.height/tileSize);
for ( let i = 0 ; i < canvas.width/tileSize ; ++i )
{
var column = {};
column.x = i*tileSize;
column.stackHeight = 10+Math.random()*maxStackHeight;
column.stackCounter = 0;
columns.push( column );
}
}
function draw()
{
ctx.fillStyle = "rgba( 0 , 0 , 0 , "+fadeFactor+" )";
ctx.fillRect( 0 , 0 , canvas.width , canvas.height );
ctx.font = (tileSize-2)+"px monospace";
ctx.fillStyle = "rgb( 0 , 255 , 0 )";
for ( let i = 0 ; i < columns.length ; ++i )
{
var randomCharacter = String.fromCharCode( 33+Math.floor(Math.random()*94) );
ctx.fillText( randomCharacter , columns[i].x , columns[i].stackCounter*tileSize+tileSize );
if ( ++columns[i].stackCounter >= columns[i].stackHeight )
{
columns[i].stackHeight = 10+Math.random()*maxStackHeight;
columns[i].stackCounter = 0;
}
}
}
function tick()
{
draw();
setTimeout( tick , 50 );
}
</script>
Ulasan