Thay đổi kích cỡ khung HTML để trống nội dung của nó

Question

Tôi có phần tử canvas HTML được thay đổi kích thước khi người dùng thay đổi kích thước màn hình.

canvas.height = pageHeight(); 
canvas.width = pageWidth(); 

Việc thay đổi kích thước thực tế hoạt động tốt, nhưng nó sẽ làm trống canvas.

Tôi muốn giữ nội dung. Có phương pháp thay đổi kích thước của phần tử canvas khác không, hoặc có cách nào để lưu trữ nội dung và sau đó vẽ chúng trở lại canvas không?

Answer 1

Bạn cần phải thay đổi kích thước khung hình bằng CSS hoặc vẽ lại canvas sau khi bạn đổi kích thước.

Nếu bạn muốn lưu nội dung của khung hình và vẽ lại nó, tôi có thể nghĩ đến một vài lựa chọn:

1. Sử dụng context.getImageData để lấy toàn bộ khung, thay đổi kích thước canvas, sau đó sử dụng context.putImageData để vẽ lại nó ở quy mô mới.
2. Tạo đối tượng Image, đặt nguồn thành kết quả của canvas.toDataUrl(), đổi kích thước canvas, sau đó vẽ hình ảnh ở tỷ lệ mới.
3. gọi context.setScale(xscale, yscale) và gọi bất kỳ chức năng nào bạn đã sử dụng để vẽ canvas ban đầu. Giả sử bạn thiết lập xscale và yscale chính xác, nó sẽ tự động chia tỷ lệ mọi thứ thành kích thước mới.
4. Tạo canvas mới có kích thước được cập nhật và gọi context.drawImage(oldCanvas, ...) để sao chép canvas cũ lên canvas mới. Sau đó, bạn sẽ chuyển ra khỏi khung cũ với hình mới.

Hai tùy chọn đầu tiên sẽ không hoạt động nếu bạn đã vẽ hình ảnh từ một miền khác vào canvas bất kỳ lúc nào và không được hỗ trợ bởi các triển khai cũ hơn.

Theo ý kiến ​​của tôi, tùy chọn 3 (vẽ lại hình ảnh ở tỷ lệ mới) là tốt nhất nếu có thể. Đó là lựa chọn duy nhất sẽ giữ cho dòng của bạn hoàn toàn trơn tru và sắc nét, và nó sẽ luôn hoạt động (giả sử bạn vẫn có tất cả thông tin để tạo ra hình ảnh).