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à
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
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
|
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é!
