Vẽ HTML trên Canvas
Vẽ trên Canvas bằng JavaScript
Việc vẽ trên khung vẽ được thực hiện bằng JavaScript.
Canvas ban đầu trống. Để hiển thị nội dung nào đó, cần có tập lệnh để truy cập vào ngữ cảnh hiển thị và vẽ lên nó.
Ví dụ sau vẽ một hình chữ nhật màu đỏ trên khung vẽ, từ vị trí (0,0) với chiều rộng là 150 và chiều cao là 75:
Ví dụ
<canvas id="myCanvas" width="200" height="100" style="border:1px solid
black;">
</canvas>
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 150, 75);
</script>
Hãy tự mình thử »Bước 1: Tìm phần tử Canvas
Trước hết, bạn phải tìm phần tử <canvas>
.
Bạn truy cập phần tử <canvas>
bằng phương thức HTML DOM getElementById()
:
const canvas = document.getElementById("myCanvas");
Bước 2: Tạo đối tượng vẽ
Thứ hai, bạn cần một đối tượng vẽ cho canvas.
Phương thức getContext()
trả về một đối tượng có các công cụ (thuộc tính và phương thức) để vẽ:
const ctx = canvas.getContext("2d");
Bước 3: Vẽ trên Canvas
Cuối cùng, bạn có thể vẽ trên canvas.
Đặt màu tô thành màu đỏ bằng thuộc tính fillStyle
:
ctx.fillStyle = "red";
Thuộc tính fillStyle
có thể là màu, độ chuyển màu hoặc mẫu. fillStyle
mặc định có màu đen.
Phương thức fillRect(x, y, width, height)
vẽ hình chữ nhật, được tô đầy màu kiểu, trên canvas:
ctx.fillRect(0, 0, 150, 75);