Tôi muốn biết làm thế nào tôi có thể dịch toàn cảnh đã được vẽ trên canvas html5, ví dụ: 5 pixel xuống. Tôi biết phương pháp dịch chỉ dịch hệ tọa độ của canvas, nhưng tôi muốn biết liệu có cách nào để dịch toàn cảnh đã được vẽ lên khung vẽ hay không.Dịch một vải html5
Bạn có thể áp dụng các biến đổi và gọi drawImage đi qua trong vải riêng của mình.
ctx.save();
ctx.translate(0, 5);
ctx.drawImage(canvas, 0, 0);
ctx.restore();
Khi làm như vậy, nội dung gốc vẫn sẽ ở bên dưới. Tùy thuộc vào hiệu ứng bạn đang cố gắng thực hiện, việc đặt globalCompositeOperation có thể giúp bạn với điều đó.
Nhưng có khả năng bạn sẽ cần sử dụng drawImage để sao chép đầu tiên vào canvas thứ hai, xóa hiện tại, áp dụng biến đổi và vẽ từ bản sao.
Không trừ khi bạn chụp ảnh màn hình và dịch.
Tuy nhiên, chỉ cần chèn
context.translate(0, 5)// or your values
ngay trước mã vẽ của bạn nên làm các trick.
tham khảo: MDN Canvas Tutorial (Transformations)
Tôi đã bảo hiểm điều đó, và (ít nhất tôi nghĩ rằng tôi) đã làm cho nó rõ ràng đó không phải là những gì tôi muốn. Bản dịch đó sẽ dịch bất cứ thứ gì tôi vẽ sau đó, không phải bất cứ thứ gì đã được vẽ. Tuy nhiên, giải pháp ảnh chụp màn hình của bạn có thể là những gì tôi muốn. Bạn có hướng dẫn về cách thực hiện điều đó không? – George
Đối tượng Canvas có một phương thức gọi là toDataUrl. Xem câu hỏi này http://stackoverflow.com/questions/934012/get-image-data-in-javascript –
Điều này nghe có vẻ như những gì tôi muốn. Tôi sẽ thử nó và cho bạn biết nếu nó làm việc cho tôi. – George
Giải pháp này hiệu quả với tôi. Tuy nhiên, nó không hoạt động tốt như vậy khi có quy mô tham gia. Tôi có một khung hình có chiều rộng và chiều cao của bản vẽ có chiều rộng và chiều cao là 120000 và 60000. Bản thân phần tử canvas có chiều rộng 1200 và chiều cao 600, do đó việc chuyển đổi tỷ lệ được thực hiện trên hệ tọa độ trước khi vẽ. Dù sao, vấn đề là việc dịch và nhân rộng sẽ làm mờ hình ảnh nếu tôi sao chép nó vào canvas thứ hai, xóa dòng hiện tại và áp dụng biến đổi và sao chép như bạn đã nói. Chỉ muốn biết nếu bạn biết làm thế nào để làm cho nó không bị mờ. – George
Vâng, đó là chính xác những gì đang xảy ra. Vấn đề là nếu tôi vẽ từ canvas chính có độ phân giải cao cho canvas sao lưu, nó sẽ luôn được vẽ bằng độ phân giải cơ bản 1200x600, thay vì độ phân giải 1200000x600000 được tăng tỷ lệ. Ngoài ra, các giải pháp đi qua lại là OK cho mục đích của tôi, vì nó chỉ cần làm điều đó khi người dùng muốn, và sẽ không làm điều đó liên tục. – George