39. Canvas Trong HTML

Canvas trong HTML: Thẻ <canvas> trong HTML là một phần tử đặc biệt cho phép bạn vẽ đồ họa, tạo các hình vẽ, hình ảnh động và nhiều hình thức khác trực tiếp trên trình duyệt web bằng JavaScript. Điều này cho phép bạn tạo các ứng dụng đồ họa phức tạp hoặc thậm chí trò chơi trong trình duyệt.

Dưới đây là một ví dụ về cách sử dụng thẻ <canvas> để vẽ một hình chữ nhật trên trang web:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas Example</title>
</head>
<body>
    <h1>Canvas Example</h1>
    <canvas id="myCanvas" width="400" height="200"></canvas>
    
    <script>
        const canvas = document.getElementById("myCanvas");
        const context = canvas.getContext("2d");
        
        // Vẽ một hình chữ nhật đầy màu
        context.fillStyle = "blue";
        context.fillRect(50, 50, 100, 100);
    </script>
</body>
</html>

Trong ví dụ trên:

Chúng ta đã tạo một thẻ <canvas> với id là “myCanvas” và đã đặt kích thước của canvas là 400 pixel chiều rộng và 200 pixel chiều cao.
JavaScript được sử dụng để lấy đối tượng ngữ cảnh (context) của canvas thông qua phương thức getContext("2d").
Chúng ta đã sử dụng context.fillStyle để đặt màu sắc cho hình chữ nhật và sau đó sử dụng context.fillRect() để vẽ hình chữ nhật lên canvas.

Thẻ <canvas> cho phép bạn thực hiện nhiều thao tác vẽ và vẽ đa dạng, từ hình học đơn giản đến các hình vẽ phức tạp hơn. Bạn có thể sử dụng các phương thức và thuộc tính khác của đối tượng ngữ cảnh để tạo ra các hiệu ứng và hình vẽ động phức tạp hơn.

Leave a Comment Cancel Reply