Tạo hiệu ứng chữ rớt với HTML5 Canvas

DEMO

Chào các bạn, hôm nay freetuts sẽ hướng dẫn các bạn tạo hiệu ứng Chữ Rớt với Canvas, bạn chỉ cần dán ở nơi bạn muốn là bạn được trải nghiệm một hiệu ứng Chữ Rớt cực ngầu và đẹp. Mong bạn thích với bộ hiệu ứng giúp mình trông giống như 1 Hacker này nhé.

1/ Phần HTML

Phần body gồm có sự kiện Onload, tại đây sẽ gắn một số function xử lý hiệu ứng cho thẻ canvas. Canvas trong phần này rất quan trọng vì nó giúp cho code chạy được hiệu hứng trên trang.

<body onload="init();spawndrop();" onclick="restart();">
<canvas id="canvas"></canvas>
<h3>#freetuts.net</h3>        

Trong đây bao gồm Canvas và chữ #freetuts, chữ #freetuts sẽ nằm bên trái dưới màn hình.

2/ Phần CSS

Trước tiên phần Css là phần mà ta tô màu background, background sẽ gán màu vào body và cỡ chữ màu xanh #freetuts sẽ gán vào h3.

Bước 1: Phối màu cho background

Vì màu nó rất quan trọng cho việc nó đẹp hay không, bạn hãy phối màu mà thấy nó đẹp mắt hơn nhé!

body {
    box-sizing:border-box ;
    margin:0 0 0 0;
    background-color:black;
}

background-color:  bạn có thể phối màu xanh, đỏ, tím, vàng, v.v.. hoặc black, red, gold, mãu màu #0000 tùy hứng mà bạn thấy nó đẹp.

Bước 2: Về kiểu chữ và màu chữ

Màu chữ nó giúp cho dòng chữ #freetuts có màu xanh và nằm ở bên trái dưới màn hình.

h3{
    z-index:2;
    position:absolute ;
    bottom:0.5em;
    color:lime;
    font-family:monospace;
}

Bước 3: Về định dạng

  • font-family:monospace ( bạn có thể chọn kiểu chữ mình yêu thích).
  • z-index:2; nó giúp cho chữ nằm bên trên chữ rớt, nằm ở lớp 2.

3/ Phần Javascript

Đây là toàn bộ phần mã nguồn cho phần Javascript, ở dưới mình sẽ cắt ra từng phần nhỏ và giải thích chi tiết hơn.

let fontSize=10;
let intervalA;
class Drop{
    constructor(){
        this.column=floor(random()*columns);
        this.row=0;
    }
    draw(){
        ctx.fillStyle = "cyan";

        ctx.fillText(String.fromCharCode(floor(random()*208+48)),this.column*cellSize,this.row*cellSize); 
    }
}
function init(){
    canvas=document.getElementById("canvas");
    canvas.width=W=window.innerWidth;
    canvas.height=H=window.innerHeight;
    ctx=canvas.getContext("2d");    
    cellSize =W/columns;    
    ctx.font = `bolder ${cellSize}px monospace`;
    drops.length=0;
    intervalA=setInterval(animate,100);
}
function animate(){
    ctx.fillStyle="rgba(0,0,0,0.2)";
    ctx.fillRect(0,0,W,H);
    for(let i=drops.length-1;i>=0;i--){
        drops[i].draw();
        drops[i].row++;
        if(drops[i].row>80) drops.splice(i,1);
    }
}
function spawndrop(){
    drops.push(new Drop());
    setTimeout(spawndrop,0+random()*30);
}

function restart(){
    clearInterval(intervalA);
    drops.length=0;
    ctx.fillStyle="rgba(0,0,0,1)";
    ctx.fillRect(0,0,W,H);
    init();
}

Các phần được giải thích như sau:

Bước 1: Phần phép Toán

let {random,floor,ceil,round}=Math; //Random các con số trong phép Toán
let canvas,ctx,W,H; //gọi id
let drops=[]; //Thả các số đã random
const columns=55
let fontSize=10; //cỡ chữ
let intervalA; //khoảng chữ (không cần động đến nó)

 Bước 2: Phần chữ, số nhiều hoặc ít

ctx.fillText(String.fromCharCode(floor(random()*208+48)),this.column*cellSize,
this.row*cellSize); 

Trong random()*208+48)) bạn có thể thay đổi số 208 theo ý bạn, nếu bạn chỉnh nó về 1 thì chỉ có 1 con số 0, nếu chỉnh càng cao thì nó sẽ rớt rất nhiều chữ.

Bước 3: Id và đối tượng 2D

function init(){
    canvas=document.getElementById("canvas"); //biến gọi canvas id
    canvas.width=W=window.innerWidth; //chiều rộng của canvas
    canvas.height=H=window.innerHeight; //chiều cao của canvas
    ctx=canvas.getContext("2d");    //chọn dối tượng vẽ 2D
    cellSize =W/columns;    
    ctx.font = `bolder ${cellSize}px monospace`;
    drops.length=0;
    intervalA=setInterval(animate,100);
}

Bước 4: Số hàng chữ rớt

function spawndrop(){
    drops.push(new Drop());
    setTimeout(spawndrop,0+random()*33); //Cỡ hàng mà chữ rớt, số cao thì hàng càng thưa
}

Mình đã rút gọn cho bạn những ý chính để nó hoạt động được, giúp cho bạn thay đổi dễ dàng những phần chính.

4/ Toàn bộ code 

Dưới đây là toàn bộ code của bài này.

Toàn bộ code RUN
<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
                box-sizing:border-box ;
                margin:0 0 0 0;
                background-color:black;
            }

            h3{
                z-index:2;
                position:absolute ;
                bottom:0.5em;
                color:lime;
                font-family:monospace;
            }
        </style>
        <script>
            let {random, floor, ceil, round} = Math;
                    let canvas, ctx, W, H;
                    let drops = [];
                    const columns = 55;
                    let fontSize = 10;
                    let intervalA;
                    class Drop{
            constructor(){
            this.column = floor(random() * columns);
                    this.row = 0;
            }
            draw(){
            ctx.fillStyle = "cyan";
                    ctx.fillText(String.fromCharCode(floor(random() * 208 + 48)), this.column * cellSize, this.row * cellSize);
            }
            }
            function init(){
            canvas = document.getElementById("canvas");
                    canvas.width = W = window.innerWidth;
                    canvas.height = H = window.innerHeight;
                    ctx = canvas.getContext("2d");
                    cellSize = W / columns;
                    ctx.font = `bolder ${cellSize}px monospace`;
                    drops.length = 0;
                    intervalA = setInterval(animate, 100);
            }
            function animate(){
            ctx.fillStyle = "rgba(0,0,0,0.2)";
                    ctx.fillRect(0, 0, W, H);
                    for (let i = drops.length - 1; i >= 0; i--){
            drops[i].draw();
                    drops[i].row++;
                    if (drops[i].row > 80) drops.splice(i, 1);
            }
            }
            function spawndrop(){
            drops.push(new Drop());
                    setTimeout(spawndrop, 0 + random() * 30);
            }

            function restart(){
            clearInterval(intervalA);
                    drops.length = 0;
                    ctx.fillStyle = "rgba(0,0,0,1)";
                    ctx.fillRect(0, 0, W, H);
                    init();
            }

        </script>
        <title>matrix rain</title>
    </head>
    <body onload="init(); spawndrop();" onclick="restart();">
        <canvas id="canvas"></canvas>
        <h3>#freetuts.net</h3>        
    </body>
</html>

5/ Lời kết

Như vậy, để có một hiệu ứng Chữ rớt đẹp này ta phải trải qua những chỉnh sửa nhiều thứ chính. Mỗi chữ rớt thì phải qua thuật Toán, từng chữ rớt dài xuống, chiều rộng và ngang.

Bài này kết thúc tại đây, ta sẽ gặp nhau ở bài tiếp theo.

Khóa học nên xem

Nguồn: freetuts.net