Vẽ HTML Canvas

vẽ trên khung vẽ bằng JavaScript

tất cả các vẽ trên khung vẽ HTML phải được hoàn thành bằng JavaScript:

mẫu

<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>

thử ngay

Bước 1: Tìm phần tử Canvas

đầu tiên, bạn phải tìm thấy phần tử <canvas>.

được thực hiện bằng cách sử dụ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ẽ khung vẽ.

phương thức getContext() là một đối tượng HTML tích hợp, nó cung cấp các thuộc tính và phương thức để vẽ:

const ctx = canvas.getContext("2d");

Bước 3: Vẽ trên khung vẽ

cuối cùng, bạn có thể vẽ trên khung vẽ.

đặt phong cách lấp đầy của đối tượng vẽ thành màu đỏ:

ctx.fillStyle = "#FF0000";

thuộc tính fillStyle có thể là màu CSS, độ dốc hoặc mẫu. giá trị mặc định của fillStyle là màu đen.

phương thức fillRect(x,y,width,height) vẽ một hình vuông trên khung vẽ, sử dụng phong cách lấp đầy để lấp đầy:

ctx.fillRect(0, 0, 150, 75);

Xin xem thêm:

Sách tham khảo đầy đủ Canvas của CodeW3C.com