dịp hiếm hoi, <canvas> không vẽ lại

Question

tôi sử dụng <canvas> để vẽ tất cả các ghi chú và glyphs trong các ứng dụng web giáo dục âm nhạc của tôi: http://www.musictheory.net/exercises/keysig/bc98yy

Một Firefox sử dụng 15.0.1 đã báo cáo rằng đôi khi cuộc tập trận diễn ra vào câu hỏi tiếp theo, nhưng khung vẫn hiển thị câu hỏi trước. Tôi đã thấy điều này xảy ra trong thử nghiệm một lần (trong số ~ 500 câu hỏi).

Khi nó xảy ra, vải đã được giải tỏa qua cả canvas.width = canvas.width và một cuộc gọi đến .clearRect vào bối cảnh và glyphs đã được rút ra trong JavaScript qua .beginPath, .quadraticCurveTo, .closePath, vv Tuy nhiên, nó có vẻ như đệm ủng hộ của vải không bao giờ bị đỏ bừng/bị cuốn vào cửa sổ.

Tôi đã thấy báo cáo lỗi trong quá khứ liên quan đến vấn đề tương tự:

• https://bugzilla.mozilla.org/show_bug.cgi?id=787623
• https://bugzilla.mozilla.org/show_bug.cgi?id=794337
• http://code.google.com/p/chromium/issues/detail?id=55339

tôi có thể buộc một vẽ lại bằng cách thực hiện một DOM Hack như chèn một nút văn bản dưới dạng con của canvas và sau đó loại bỏ nó trên chu kỳ vòng lặp chạy tiếp theo hoặc sửa đổi màu nền hoặc phần đệm của Tranh sơn dầu. Điều này có vẻ nặng tay, tuy nhiên, và tôi tiếp tục có cảm giác dai dẳng rằng tôi đang thiếu một cái gì đó hiển nhiên.

mã vẽ của tôi là đủ đơn giản:

canvas.width = width; 
ctx.clearRect(0, 0, width, height); 
ctx.save(); 
// Lots of drawing code here 
ctx.restore() 
ctx.clearRect(0, 0, 1, 1); // Helped force a repaint on some older WebKit browsers? 

tôi đã đảm bảo rằng số lượng .save và .restore cuộc gọi được cân bằng.

1) Tôi đang gọi mã này trực tiếp để đáp ứng với trình xử lý sự kiện onclick. Thay vào đó, tôi có nên sử dụng requestAnimationFrame hoặc setTimeout để thực hiện việc vẽ trên chu kỳ vòng lặp chạy trong tương lai không?

2) Tôi không bỏ lỡ điều gì đó hiển nhiên, như API canvas.pleaseRepaintNow(), phải không?

3) Những người khác có gặp phải các sự cố tương tự và phải sửa đổi DOM để buộc vẽ lại không?

Answer 1

Tôi đã cố gắng để có được lỗi xảy ra nhưng sau khi điên cuồng nhấp vào Firefox trong một thời gian, tôi chưa bao giờ thấy nó. Đây là cách tôi xóa canvas có vẻ như hoạt động, nhưng mang nó với một hạt muối vì tôi không thể có được lỗi xảy ra tôi cũng không thể kiểm tra xem điều này có khắc phục được điều gì không ...

// Store the current transformation matrix 
ctx.save(); 

// Use the identity matrix while clearing the canvas 
ctx.setTransform(1, 0, 0, 1, 0, 0); 
ctx.clearRect(0, 0, canvas.width, canvas.height); 

// Restore the transform 
ctx.restore(); 

Answer 2

Thêm context.stroke(); vào dòng cuối cùng của hàm onLoad, nó sửa lỗi trong Firefox. Nếu không, các thay đổi đối với canvas sẽ không hiển thị cho đến khi cửa sổ được vẽ lại.

Nó hoạt động trong trường hợp của tôi ít nhất.

window.onload = function() { 
    canvas = document.getElementById("canvas"); 
    context = canvas.getContext("2d"); 
    //Code here... 
    context.stroke(); 
}