Vẽ hình trong canvas HTML

Phương pháp

ctx.fillRect(10, 10, 60, 60);
ctx.fillRect(100, 10, 100, 60);

8 được sử dụng để vẽ cả hình vuông và hình chữ nhật. Hai tham số đầu tiên là tọa độ x và y của hình cần vẽ. Hai tham số cuối cùng là chiều rộng và chiều cao của hình dạng

Nhân vật. Hình chữ nhật

hình cơ bản

Trong chương trình sau, chúng ta vẽ một số hình cơ bản

HTML5 canvas shapes








 

Sáu hình dạng khác nhau được vẽ trên canvas

ctx.fillStyle = 'gray';

Các hình dạng sẽ được sơn màu xám

ctx.fillRect(10, 10, 60, 60);
ctx.fillRect(100, 10, 90, 60);

Các hình chữ nhật được vẽ bằng phương pháp

ctx.fillRect(10, 10, 60, 60);
ctx.fillRect(100, 10, 100, 60);

8. Hình chữ nhật là hình dạng duy nhất không được khởi tạo bởi phương thức

HTML5 canvas shapes








 

0

ctx.beginPath();
ctx.arc(250, 40, 32, 0, 2*Math.PI);
ctx.fill(); 

Một vòng tròn được vẽ bằng phương pháp

HTML5 canvas shapes








 

1. Phương thức thêm một cung vào đường dẫn đã tạo. Hai tham số đầu tiên xác định tọa độ x và y của điểm xung quanh cung tròn. Hai tham số tiếp theo chỉ định góc bắt đầu và góc kết thúc của cung. Các góc được xác định bằng radian. Tham số cuối cùng là tùy chọn; . Hướng mặc định là theo chiều kim đồng hồ

Quảng cáo

ctx.beginPath();
ctx.moveTo(10, 160);
ctx.lineTo(90, 160);
ctx.lineTo(50, 110);
ctx.closePath();
ctx.fill(); 

Với các phương pháp

HTML5 canvas shapes








 

2 và

HTML5 canvas shapes








 

3, chúng ta vẽ một hình tam giác. Phương thức

HTML5 canvas shapes








 

4 khiến bút di chuyển trở lại điểm bắt đầu của đường dẫn con hiện tại. Trong trường hợp của chúng tôi, nó kết thúc hình tam giác

ctx.save();
ctx.scale(2, 1);
ctx.beginPath();
ctx.arc(72, 130, 25, 0, 2*Math.PI);
ctx.fill();
ctx.restore();

Một hình bầu dục được vẽ bằng cách chia tỷ lệ một vòng tròn. Các thao tác được đặt giữa các phương pháp

HTML5 canvas shapes








 

5 và

HTML5 canvas shapes








 

6 để thao tác chia tỷ lệ không ảnh hưởng đến các bản vẽ tiếp theo

ctx.beginPath();
ctx.arc(250, 120, 40, 0, Math.PI);
ctx.fill(); 

Hình cuối cùng, hình bán nguyệt, được vẽ bằng phương pháp

HTML5 canvas shapes








 

1

Nhân vật. hình cơ bản

Biểu đồ hình tròn là một biểu đồ tròn, được chia thành các lát để minh họa tỷ lệ số

ctx.fillStyle = 'gray';

0

Ví dụ vẽ biểu đồ hình tròn. Nó có ba lát, được sơn bằng các sắc thái khác nhau của màu xanh lá cây

Quảng cáo

ctx.fillStyle = 'gray';

1

Để các đường viền màu trắng của biểu đồ hiển thị rõ ràng, chúng tôi thay đổi màu nền của canvas thành màu xám

ctx.fillStyle = 'gray';

2

Đây là dữ liệu mà biểu đồ hình tròn minh họa

ctx.fillStyle = 'gray';

3

Hằng số

HTML5 canvas shapes








 

8 là khoảng cách từ biểu đồ hình tròn đến đường viền của canvas

ctx.fillStyle = 'gray';

4

Công thức tính góc cuối của lát cắt đang vẽ

ctx.fillStyle = 'gray';

5

Ba phương pháp được sử dụng để vẽ lát cắt hiện tại.

HTML5 canvas shapes








 

2,

HTML5 canvas shapes








 

1 và

HTML5 canvas shapes








 

4

ctx.fillStyle = 'gray';

6

Chúng tôi vẽ cả bên trong và đường viền của các hình

ctx.fillStyle = 'gray';

7

Đối với lát cắt tiếp theo, góc kết thúc cuối cùng trở thành góc bắt đầu

Nhân vật. Biểu đồ hình tròn

Ngôi sao

Ví dụ sau tạo hình ngôi sao

Quảng cáo

ctx.fillStyle = 'gray';

8

Một hình ngôi sao được tạo ra từ một loạt các điểm

ctx.fillStyle = 'gray';

9

Đây là tọa độ của ngôi sao

ctx.fillRect(10, 10, 60, 60);
ctx.fillRect(100, 10, 100, 60);

0

Chúng tôi di chuyển đến tọa độ ban đầu của hình dạng bằng phương pháp

HTML5 canvas shapes








 

2

ctx.fillRect(10, 10, 60, 60);
ctx.fillRect(100, 10, 100, 60);

1

Ở đây chúng tôi kết nối tất cả các tọa độ của ngôi sao bằng phương pháp

HTML5 canvas shapes








 

3

ctx.fillRect(10, 10, 60, 60);
ctx.fillRect(100, 10, 100, 60);

2

Phương pháp

ctx.fillStyle = 'gray';

4 lấp đầy phần bên trong của hình ngôi sao với màu (xám) đã xác định

Nhân vật. Ngôi sao

Có thể tạo các hình dạng mới với tính năng tổng hợp. Kết hợp là một quy tắc xác định cách các hình dạng trong một canvas pha trộn

ctx.fillRect(10, 10, 60, 60);
ctx.fillRect(100, 10, 100, 60);

3

Ví dụ tạo một hình bằng cách kết hợp các đường viền của ba vòng tròn. Ba vòng tròn chồng lên nhau

ctx.fillRect(10, 10, 60, 60);
ctx.fillRect(100, 10, 100, 60);

4

Một vòng tròn được vẽ trên canvas

ctx.fillRect(10, 10, 60, 60);
ctx.fillRect(100, 10, 100, 60);

5

Hoạt động tổng hợp được đặt thành

ctx.fillStyle = 'gray';

5. Trong chế độ này, điểm đến được hiển thị ở mọi nơi mà nguồn và đích không trùng nhau. Ở mọi nơi khác, tính minh bạch được hiển thị

ctx.fillRect(10, 10, 60, 60);
ctx.fillRect(100, 10, 100, 60);

6

Bây giờ các vòng tròn giống nhau được tô màu xám. Các bản vẽ mới sẽ xóa các bản vẽ hiện có trong đó hai bản vẽ chồng lên nhau. Kết quả là, chỉ còn lại những đường viền

Nhân vật. ba vòng tròn

Trong phần này của hướng dẫn canvas HTML5, chúng tôi đã đề cập đến một số hình dạng cơ bản và nâng cao hơn trong canvas HTML5

Làm cách nào để vẽ đồ họa trong HTML?

Làm cách nào để vẽ một hộp trong HTML?

Thẻ nào có thể tạo bản vẽ trong HTML5?

Làm cách nào để tạo hình chữ nhật trong HTML?