38. Graphic Trong HTML

Graphic trong HTML: bạn có thể chèn các hình ảnh và đồ họa bằng cách sử dụng thẻ <img> hoặc sử dụng các phần tử HTML5 như <canvas> để vẽ đồ họa.

Dưới đây là ví dụ về cách sử dụng thẻ <img> để chèn một hình ảnh:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Example</title>
</head>
<body>
    <h1>Image Example</h1>
    <img src="image.jpg" alt="A beautiful landscape">
</body>
</html>

Trong ví dụ trên:

src: Đường dẫn tới tệp hình ảnh (image.jpg) để chèn vào trang.
alt: Văn bản mô tả hình ảnh, hiển thị khi hình ảnh không thể hiển thị hoặc để cung cấp thông tin thay thế cho người dùng có khả năng truy cập.

Ngoài việc sử dụng <img>, bạn cũng có thể sử dụng thẻ <canvas> để vẽ đồ họa một cách động trong HTML5:

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>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</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");
        
        context.fillStyle = "blue";
        context.fillRect(50, 50, 100, 100);
        
        context.strokeStyle = "red";
        context.lineWidth = 3;
        context.strokeRect(150, 50, 100, 100);
    </script>
</body>
</html>

Trong ví dụ trên:

Chúng ta đã tạo một thẻ <canvas> có chiều rộng 400 và chiều cao 200.
Sử dụng JavaScript, chúng ta đã lấy đối tượng ngữ cảnh của canvas (context) để vẽ các hình chữ nhật.
Chúng ta đã sử dụng các phương thức như fillRect() để vẽ hình chữ nhật đầy màu và strokeRect() để vẽ hình chữ nhật viền.

Dưới đây là một ví dụ về cách chèn một hình ảnh bằng thẻ <img> và sử dụng thẻ <canvas> để vẽ đồ họa đơn giản trong HTML:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Graphic Examples</title>
</head>
<body>
    <h1>Graphic Examples</h1>
    
    <h2>Image Example</h2>
    <img src="https://via.placeholder.com/300" alt="Placeholder Image">
    
    <h2>Canvas Example</h2>
    <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);
        
        // Vẽ một hình chữ nhật viền
        context.strokeStyle = "red";
        context.lineWidth = 3;
        context.strokeRect(150, 50, 100, 100);
        
        // Vẽ một đoạn văn bản
        context.font = "16px Arial";
        context.fillStyle = "black";
        context.fillText("Hello, Canvas!", 200, 180);
    </script>
</body>
</html>

Trong ví dụ này:

Chúng ta chèn một hình ảnh placeholder bằng cách sử dụng thẻ <img>.
Chúng ta sử dụng thẻ <canvas> để vẽ một hình chữ nhật đầy màu và một hình chữ nhật viền, cũng như viết đoạn văn bản lên canvas sử dụng phương thức fillText().
JavaScript được sử dụng để lấy đối tượng ngữ cảnh của canvas và vẽ các hình và văn bản.

Bạn có thể chạy mã này trong một trình duyệt web để thấy cách hình ảnh và đồ họa được hiển thị.

Leave a Comment Cancel Reply