canvas in a div with display none does not work

Question

Tôi đang gặp sự cố với phần tử canvas. Nó không hiển thị khi nó nằm trong div ẩn và div được bật. lời giải thích tốt hơn và ví dụ ở đây

http://jsfiddle.net/78sJT/10/

này đang xảy ra trong (những người khác không được kiểm tra) ff và chrome. Bất cứ ai có thể cho tôi biết lý do tại sao/làm thế nào để khắc phục vấn đề này.

Answer 1

Vấn đề là các biểu đồ phát hiện chiều rộng/chiều cao của div là 0/0 và không tìm hiểu cách khác cho đến khi nó được vẽ lại (không có sự kiện JS kích hoạt khi phần tử DOM riêng lẻ được thay đổi kích thước).

Cách giải quyết đơn giản nhất là chỉ cần một cách rõ ràng để cho dygraph biết điều đó nên cập nhật kích thước của nó và vẽ lại bản thân sau khi div được toggled sử dụng g.resize();

$(document).ready(function(){ 
     $('.click').click(function(){ 
     $('#hidden').toggle(); 
     g.resize(); 
     }); 
    }); 

tôi cập nhật jsfiddle bạn http://jsfiddle.net/78sJT/13/

Answer 2

Tôi chỉ cần nhấn này vấn đề trong Chrome 37.0.2062.124 m, phù hợp với vấn đề được mô tả trong câu hỏi của OP. Tuy nhiên, tôi không sử dụng bất kỳ thư viện đồ họa cụ thể nào, chỉ vẽ lên canvas. Và tôi đã vẽ lại bức tranh khi kích thước của DIV kèm theo thay đổi.

Tôi thấy rằng nếu chiều rộng hoặc chiều cao của canvas được đặt thành 0, nó sẽ không đáng tin cậy. Lần sau bạn đặt chiều rộng và chiều cao thành các giá trị khác 0, bất kỳ bản vẽ nào bạn thực hiện ngay lập tức sẽ bị bỏ qua, mặc dù chiều rộng và chiều cao của nó bây giờ không khác và nó có thể được nhìn thấy trong cây phần tử (và hover- được đánh dấu trong trang) trong trình gỡ lỗi của Chrome.

Vì vậy, ngoài những lời khuyên trong câu trả lời benni_mac_b của bạn phải:

• sử dụng setTimeout hoặc tương tự để trì hoãn vẽ trên vải, vì vậy bạn không làm điều đó ngay lập tức sau khi cài đặt chiều rộng/chiều cao, hoặc
• đảm bảo bạn không bao giờ đặt canvas thành độ rộng/chiều cao bằng không. Đảm bảo ít nhất là 1 pixel.

Tôi làm việc sau để đơn giản và giải quyết được sự cố.

Nói tóm lại:

Một vải vừa tăng từ (0, 0) đến (1000, 1000) không thể được vẽ trên ngay lập tức - nó bỏ qua tất cả các lệnh vẽ. Nhưng nếu nó vừa phát triển từ (1, 1) đến (1000, 1000) bạn có thể vẽ ngay trên tất cả.