Gần đây tôi đã bắt đầu học cách làm việc với HTML5 Canvas và tôi đã có rất nhiều câu hỏi. Tất cả liên quan đến hiệu suất. Tôi hiểu rằng tất cả mọi thứ với điều này là khá chủ quan với những gì tôi đang làm. Nhưng tôi chỉ hy vọng đạt được một số rõ ràng.HTML5 Canvas lớn cuộn hiệu suất cuộn
Trong ví dụ về tạo trò chơi với chế độ xem từ trên không của trình phát. tất cả 2d có bản đồ cuộn xung quanh cả trục X và trục Y.
Câu hỏi 1: Theo hiểu biết của tôi, Miễn là không có đối tượng chuyển động nào trong khung bản đồ của tôi. nó hiệu quả hơn để làm một cái gì đó như tạo một phần tử canvas lớn mà tôi vẽ một lần và sau đó sử dụng JS để cuộn trang/di chuyển khung hình. thay vì tạo canvas có kích thước màn hình của tôi, dịch canvas và vẽ lại bản đồ theo từng chuyển động.
Câu hỏi 2: Nếu tôi sử dụng phương pháp trên có canvas lớn cuộn về để di chuyển bản đồ của tôi. sẽ có nhiều sự khác biệt về hiệu suất giữa một bản vẽ đơn giản trên canvas và bản vẽ phức tạp? Ví dụ: canvas đơn giản với một vài hàng khối màu đơn lẻ so với canvas phức tạp với hàng nghìn dòng, hình tròn, độ dốc, mẫu và chi tiết. Nếu hai canvases có cùng chiều rộng và chiều cao thì không nên có sự khác biệt lớn về hiệu suất cho việc trình duyệt di chuyển chúng đúng không? (không vẽ lại).
Câu hỏi 3: Có phương pháp ưu tiên nào để xử lý bản đồ lớn hơn đối tượng canvas không? Tôi biết các trình duyệt khác nhau sẽ giới hạn kích thước vật lý của canvas. Có tốt hơn không khi thiết kế bản đồ trong một số khối canvas lớn. Tải khối liền kề vào phần tử canvas mới khi người chơi đến gần cạnh. hoặc điều này sẽ gây ra vấn đề. nếu tôi đang làm việc với các phần tử canvas có kích thước 10.000px x 10.000px và tôi bắt đầu đặt một vài trong số các cạnh này vào tôi, tôi chỉ yêu cầu sự cố? Tôi tốt hơn là thiết kế nó để chạy trong một khung hình duy nhất mà chỉ vẽ lại bản đồ khi người chơi di chuyển và giữ sự phức tạp của bản đồ xuống. và lập trình nó để nó không nghĩ về các phần của bản đồ không gần với người chơi.
Tôi đã đọc một loạt các thủ thuật để tăng hiệu suất như canvas khung và không vẽ lại canvas nhiều hơn trình duyệt đang làm mới. nhưng tôi đã gặp khó khăn khi tìm kiếm thông tin về thực tiễn tốt để xử lý các bản đồ lớn và hiệu suất di chuyển xung quanh chúng.
Tôi thực sự muốn nghe suy nghĩ của mọi người.
(1) Canvas được sử dụng rộng rãi sử dụng nhiều tài nguyên hơn canvas khung nhìn kích thước khung nhìn - giữ kích thước canvas của bạn càng gần với kích thước khung nhìn càng tốt. Vẽ lại là đắt hơn so với panning một canvas quá khổ bằng cách sử dụng một khung nhìn (2) Không có nhiều sự khác biệt trong rendering đơn giản vs nội dung phức tạp nếu lệnh vẽ không tham gia. (3) 10K gấp 10K lần một số bức tranh sơn dầu (!!!). Dừng ngay lập tức và cấu trúc lại mã của bạn để sử dụng canvas có kích thước sane. – markE
10K x 10K chủ yếu là minh họa. Tôi đã suy nghĩ nhiều hơn dọc theo các dòng tạo ra một vải liền kề mới và sau đó loại bỏ cuối cùng do đó sẽ chỉ có một hoặc hai tại một thời điểm. nhưng vâng tôi bắt đầu thấy đó không thực sự là cách tốt nhất để làm điều đó. –