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>
0 Nhận xét