Canvas học tập

Jan 19 2023

Tiếp theo, chúng ta có phần tử “html”, là nơi chứa tất cả các phần tử khác trên trang. Nó có thuộc tính “lang” được đặt thành “en” chỉ định ngôn ngữ của tài liệu.

Nên làm quen với vscode
nên có hiểu biết cơ bản về HTML, CSS và javascript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Document</title>
</head>
<body>
    <canvas id="canvas1"></canvas>
    <script src="script.js"></script>
</body>
</html>

Bên trong phần tử “html”, chúng ta có phần tử “head”, chứa thông tin meta về tài liệu, chẳng hạn như mã hóa ký tự và tiêu đề của tài liệu. Chúng tôi có phần tử “meta” chứa thuộc tính “bộ ký tự” được đặt thành “UTF-8” chỉ định mã hóa ký tự của tài liệu. và phần tử “meta” với thuộc tính “http-equiv” được đặt thành “Tương thích với X-UA” và thuộc tính “nội dung” được đặt thành “IE=edge” để đảm bảo rằng trang được hiển thị trong phiên bản Internet Explorer mới nhất. Chúng tôi cũng có phần tử “meta” với thuộc tính “tên” được đặt thành “khung nhìn” và thuộc tính “nội dung” được đặt thành “chiều rộng=chiều rộng thiết bị, tỷ lệ ban đầu=1.0”, giúp trang phản hồi nhanh với các kích thước màn hình khác nhau.

Chúng tôi cũng có một phần tử “liên kết” với thuộc tính “rel” được đặt thành “bản định kiểu” và thuộc tính “href” được đặt thành “styles.css” liên kết biểu định kiểu CSS với tài liệu HTML.

Tiêu đề của tài liệu được đặt trong phần tử “title”.

Bên trong phần tử “body”, chúng ta có phần tử “canvas” với thuộc tính “id” được đặt thành “canvas1”, đây là nơi mã JavaScript sẽ vẽ hoạt ảnh. Cuối cùng, chúng ta có một phần tử “script” với thuộc tính “src” được đặt thành “script.js”, phần tử này liên kết tệp JavaScript với tài liệu HTML.

const canvas = document.getElementById('canvas1');
const context = canvas.getContext('2d');

const FRAME_WiDTH = canvas.width = 600;
const FRAME_HEIGHT = canvas.height = 600;

console.log(context);

const PLAYERIMAGE = new Image();
PLAYERIMAGE.src = 'img/shadow_dog.png';

// custom function
let x = 0;
function animate(){
    context.clearRect(0, 0, FRAME_WiDTH, FRAME_HEIGHT);
    context.fillRect(x,100,100,100);
    context.drawImage(PLAYERIMAGE, 50, 50,)

    requestAnimationFrame(animate);
};

animate();

Tiếp theo, chúng tôi đang xác định hai hằng số, “FRAME_WIDTH” và “FRAME_HEIGHT”, được đặt tương ứng với chiều rộng và chiều cao của phần tử canvas. Chúng tôi cũng đang sử dụng hàm “console.log” để xuất biến ngữ cảnh ra bảng điều khiển.

Sau đó, chúng tôi đang tạo một đối tượng Hình ảnh mới và lưu trữ nó trong hằng số “PLAYERIMAGE”. Sau đó, chúng tôi sẽ đặt thuộc tính “src” của đối tượng hình ảnh đó thành đường dẫn của tệp hình ảnh.

Chúng tôi cũng đang tạo một hàm tùy chỉnh có tên là “animate”, hàm này sẽ được gọi lặp lại trong một vòng lặp bằng phương thức requestAnimationFrame. Bên trong hàm animate, trước tiên chúng ta sử dụng phương thức “clearRect” để xóa toàn bộ canvas. Sau đó, chúng tôi đang sử dụng phương thức “fillRect” để vẽ một hình chữ nhật ở tọa độ x, y của (x, 100), với chiều rộng và chiều cao là 100 pixel. Sau đó, chúng ta sẽ sử dụng phương thức “drawImage” để vẽ “PLAYERIMAGE” trên canvas ở tọa độ x và y của (50, 50).

Cuối cùng, chúng ta gọi hàm “animate” một lần để bắt đầu vòng lặp hoạt hình. Và biến x sẽ được cập nhật trên mỗi vòng lặp để tạo hiệu ứng động.

Canvas học tập

Để được tiếp tục, tôi sẽ dần dần phát triển mã và dự án.