Cách tốt nhất để lớp trong Canvas HTML5 là gì?

Question

Nếu bạn cần làm việc trên các lớp khác nhau trên canvas HTML5, cách tốt nhất để làm điều đó là gì? Tôi thấy một số người quyết định xếp chồng lên nhau một số canvases ontop của nhau bằng cách sử dụng position: absolute. Đây có phải là cách tốt nhất?

Answer 1

Cá nhân, tôi sẽ không ngăn xếp canvas 'lên trên nhau. Canvas thực sự chỉ là một bitmap hiển thị tất cả các pixel bạn cần, do đó bạn chỉ cần một pixel cho hầu hết các trường hợp.

Tôi khuyên bạn nên sử dụng thư viện để giúp bạn quản lý các đối tượng khác nhau. Tôi đã thấy rằng EaselJS của Grant Skinner rất dễ làm việc.

Thư viện này cho phép bạn dễ dàng nhóm các đối tượng và thêm chúng vào canvas, nó cũng làm cho nó tầm thường để thêm người nghe chuột để nắm bắt các nhấp chuột vào đối tượng, vv. canvas không có thư viện.

Có tài liệu và ví dụ về số EaselJS.

EDIT:

Dưới đây là một đoạn trích từ các tài liệu liên quan đến việc container sử dụng các đối tượng nhóm.

Vùng chứa là danh sách hiển thị có thể lồng nhau cho phép bạn làm việc với các yếu tố hiển thị kết hợp. Ví dụ, bạn có thể nhóm cánh tay, chân, thân và đầu Bitmaps lại với nhau thành một Container cá nhân, và biến đổi chúng thành một nhóm, trong khi vẫn có thể di chuyển các phần riêng lẻ liên quan đến nhau. Trẻ em của container có biến đổi của họ và tính chất alpha nối với Container mẹ của họ. Ví dụ, một Shape với x = 100 và alpha = 0.5, được đặt trong một Container với x = 50 và alpha = 0,7 sẽ được trả về canvas tại x = 150 và alpha = 0,35. Các thùng chứa có một số chi phí, vì vậy bạn thường không nên tạo một Container để chứa một đứa trẻ.