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ạngNhâ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 shapes0
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 shapes1. 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 shapes2 và
HTML5 canvas shapes3, chúng ta vẽ một hình tam giác. Phương thức
HTML5 canvas shapes4 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 shapes5 và
HTML5 canvas shapes6 để 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 shapes1Nhâ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áoctx.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 shapes8 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 shapes2,
HTML5 canvas shapes1 và
HTML5 canvas shapes4
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ònNgôi sao
Ví dụ sau tạo hình ngôi sao
Quảng cáoctx.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 shapes2
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 shapes3
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 địnhNhâ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ònTrong 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