Ảnh ma trận với javascript

Hôm nay chán chẳng có việc gì làm, ngồi nghịch nghịch chút xíu với cái blog này. Hì. Ngày hôm nay sẽ share cho các bạn một đoạn javascript giúp chúng ta có thể tạo ra được 1 ma trận ảnh động giống trong phim ma trận vậy

Và cũng nhân tiện đây thông báo với các bạn rằng, sắp tới có lẽ blog sẽ phải chuyển nhà một thời gian. Mình cũng rất buồn, hy vọng sang nhà mới, sẽ được sự ủng hộ của các bạn nhiều hơn.
OK không miên man nữa, để các bạn không phải hình dung nhiều, thì mình xin up cái ảnh demo phát nhở

Thực ra cũng không có gì ghê gớm lắm đâu chỉ là vài đoạn javascript nhỏ thôi mà

canvas.height = window.screen.height;
canvas.width = window.screen.width;

var columns = []
var character =0;
for (i = 0; i <256; columns[i++] = 1);

function step() {

canvas.getContext('2d').fillStyle = 'rgba(0,0,0,0.05)';
canvas.getContext('2d').fillRect(0, 0, canvas.width, canvas.height);

//green
canvas.getContext('2d').fillStyle = '#0F0';
//for each column
columns.map(function (value, index) {
//draw the character
canvas.getContext('2d').fillText(character, //text
index * 10, //x
value //y
);
if(character==0)
character=1;
else
character=0;
columns[index] = value > 758 + Math.random() * 1e4 ? 0 : value + 10
})
}

//1000/33 = ~30 times a second
setInterval(step, 33)

canvas.height = window.screen.height;

canvas.width = window.screen.width;

var columns = []

var character =0;

for (i = 0; i <256; columns[i++] = 1);

function step() {

canvas.getContext('2d').fillStyle = 'rgba(0,0,0,0.05)';

canvas.getContext('2d').fillRect(0, 0, canvas.width, canvas.height);

//green

canvas.getContext('2d').fillStyle = '#0F0';

//for each column

columns.map(function (value, index) {

//draw the character

canvas.getContext('2d').fillText(character, //text

index * 10, //x

value //y

);

if(character==0)

character=1;

else

character=0;

columns[index] = value > 758 + Math.random() * 1e4 ? 0 : value + 10

})

}

//1000/33 = ~30 times a second

setInterval(step, 33)

Ngoài ra trong file html các bạn chỉ cần thêm một thẻ vào trong thẻ body là được

<canvas id="canvas">

1	<canvas id="canvas">

Chúc bạn thành công, làm xong nhớ quay lại đây comment cảm nhận của mình nhé!

Ảnh ma trận với javascript

Like this:

Có liên quan

Nguyễn Trung Hiếu

Share this:

Like this:

Có liên quan

Nguyễn Trung Hiếu