HTML Canvas: Nhiều nội dung getContext cùng một lúc

Question

Tôi đang xây dựng một công cụ bằng cách sử dụng các ổ cắm web cho phép nhiều người dùng "vẽ" trên canvases của nhau. Người dùng vẽ trên canvas và đối tượng chứa các sự kiện và biến cố chuột/chuột được đẩy tới người dùng khác ngay lập tức. Điều này sau đó được vẽ trên canvases của chúng, điều này mang lại hiệu quả của việc có nhiều người dùng vẽ ở cùng một vị trí.

Nó hoạt động như mô tả: bạn có thể xem ai đó vẽ một cái gì đó, sau đó vẽ một cái gì đó sẽ xuất hiện trong khung của họ. Vấn đề xảy ra khi bạn vẽ cùng lúc với người khác.

Đối với mỗi người dùng, nó tạo ra một bối cảnh mới cho vải mỗi người dùng sử dụng:

oekaki['canvas'] = document.getElementById('canvas'); 
oekaki['ctx'][unique_user_id] = oekaki['canvas'].getContext("2d"); 

Khi bạn vẽ tại thời điểm giống như một người dùng khác, các bức tranh sơn dầu điên cuồng vẽ ranh giới giữa tọa độ của bạn và của họ, mặc dù nó sử dụng các ngữ cảnh khác nhau.

Tại sao lại xảy ra trường hợp này? Tôi có phải làm điều gì đó khác để chứa nhiều dòng được vẽ cùng một lúc không? Có thể tạo nhiều bối cảnh theo cách này không?

Mọi trợ giúp sẽ được đánh giá cao nhất.

Answer 1

The HTML5 Canvas spec says, cho getContext():

Nếu phương pháp getContext() đã được gọi vào yếu tố này cho contextId cùng, trở về cùng một đối tượng như đã trở lại mà thời gian, và hủy bỏ các bước sau. Các đối số bổ sung được bỏ qua.

Bạn không có ngữ cảnh khác nhau cho mỗi người dùng, nó giống nhau. Vị trí đường dẫn cuối cùng đang được thay đổi bởi mỗi sự kiện mới và tôi đoán bạn không sử dụng beginPath và moveTo để đặt lại đường dẫn trên mỗi sự kiện mới. Hãy thử một cái gì đó như thế này thay thế:

// on some event, want to draw to (x, y) now: 
var ctx = oekaki.canvas.getContext('2d'); 
var user = oekaki.user[unique_user_id]; 
ctx.beginPath(); 
ctx.moveTo(user.lastX, user.lastY); 
ctx.lineTo(x, y); 
// ctx.strokeStyle = ..., ctx.stroke(), etc, etc... 
user.lastX = x; 
user.lastY = y; 

Answer 2

Tôi nghi ngờ rằng đó là ngữ cảnh tương tự mà người dùng của bạn đang vẽ lên. Tôi đề nghị thu thập các yêu cầu vẽ đến và kết hợp nó trong một phương thức vẽ để xây dựng nội dung canvas khi thích hợp.