25
Dự án của tôi có Canvas HTML5 được vẽ nhiều lần trên các đối tượng đồ họa. Những vật thể này thay đổi nhanh chóng. Vẽ chúng cần có thời gian. Làm thế nào tôi có thể làm cho nó nhanh hơn?HTML5 Canvas: tốt hơn để vẽ lại các đối tượng hoặc sử dụng bitmap?
Các đối tượng không quá phức tạp nhưng chứa những thứ như vòng cung, độ dốc, đa giác.
Giao diện của một đối tượng phụ thuộc vào khoảng 10 thuộc tính mà mỗi thuộc tính có một trong khoảng 10 giá trị. Điều đó có nghĩa rằng chỉ có khoảng 100 lần xuất hiện khác với một vật thể có thể có. Đó là lý do tại sao tôi đang nghĩ về việc chỉ vẽ từng hình một và sau đó lưu vào bộ nhớ đệm một bitmap để sử dụng lại.
Tất cả những gì phải làm việc trên máy khách (ví dụ: Tôi không thể sử dụng hình ảnh làm sẵn)
- Điều gì sẽ là cách tốt nhất để làm điều này với HTML5 Canvas?
- Đó có phải là một ý tưởng hay ở tất cả hoặc là chi phí làm việc với bitmap lớn hơn vẽ lại các đối tượng mỗi lần?
Tôi đã thử bản trình diễn của bạn và trên Firefox7 trên win7 Tôi không thể thấy nhiều sự khác biệt giữa bộ đệm ẩn và không lưu trong bộ nhớ cache. Tôi vẫn đồng tình với việc sử dụng bộ nhớ đệm vì khi vẽ bộ nhớ cache "đối tượng" (đa giác/gradient) là MUCH nhanh hơn. Lý do để quay nhanh hơn nhiều khi bộ nhớ đệm là do hỗ trợ api dựng hình của các trình duyệt mới hơn – Niko
Ngoài ra, bài viết này thật tuyệt vời cho các mẹo về hiệu suất canvas: http://www.html5rocks.com/en/tutorials/canvas/performance/ –
@Niko Tôi cần cập nhật bản trình diễn của mình khá cũ, hiệu suất chính mà bạn thấy là khi bạn thêm vài trăm nữa trên màn hình. – Loktar