1.1 Canvas

 


Demo : https://www.lenlop123.com/2020/09/11-canvas_28.html

<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
    canvas {
        border: 1px solid #d3d3d3;
        background-color: #f1f1f1;
    }
</style>

<div>
    <canvas id="canvas" class="canvas"></canvas>
</div>

<script>
    // hàm onload sẽ chạy sau cùng, sau khi load đủ dữ liệu
    window.onload = function () {
        startGame()
    };

    function startGame() {
        myGameArea.start();     // khởi tạo canvas
    }

    var myGameArea = {
        canvas: document.getElementById('canvas'),
        start: function () {
            this.canvas.width = 480;                        // Lấy thẻ HTML Canvas
            this.canvas.height = 270;
            this.context = this.canvas.getContext("2d");    // Vẽ ở mô hình 2D            
        }
    }

</script>

<p>We have created a game area! (or at least an empty canvas)</p>






Nhận xét