HTML畫布：同時繪製多個getContext

我正在構建一個使用websockets的工具，它允許多個用戶在彼此的畫布上「繪製」。用戶在畫布上繪製，並且包含mousedown/mouseup事件和座標的對象即時推送給其他用戶。然後將它們繪製在他們的畫布上，這可以讓多個用戶在同一個地方畫畫。HTML畫布：同時繪製多個getContext

它的工作方式如下：你可以看到某人畫了一些東西，然後畫出一些會出現在他們的畫布中的東西。當你像其他人一樣畫畫時會出現問題。

對於每一個用戶來說，使用每個用戶的畫布創建一個新的上下文：

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

當你畫在同一時刻以其他用戶身份，畫布瘋狂提請你和它們的座標之間的直線，儘管它使用不同的上下文。

爲什麼會出現這種情況？我是否需要做其他事情來容納同時繪製多條線？以這種方式創建多個上下文是不可能的？

任何幫助將不勝感激。

來源

2011-12-07 eddz

The HTML5 Canvas spec says，爲getContext()：

如果的getContext（）方法已經被調用此元件上對於相同的關聯標識符，返回相同的對象作爲被返回時間，跳過這些步驟。額外的參數被忽略。

對於每個用戶，您沒有不同的上下文，它是相同的。每個新事件都會改變最後一個路徑位置，並且我猜測您沒有使用beginPath和moveTo來重置每個新事件的路徑。嘗試這樣的代替：

// 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;

來源

2011-12-07 15:33:31

你，先生，輝煌。這立即奏效，並且讓我從幾個小時的挫折中解脫出來。非常感謝你！ – eddz

我懷疑它是用戶正在繪製的相同上下文。我建議收集傳入的繪圖請求並將其合併到一個繪製方法中，以在適當的時候生成畫布內容。

來源

2011-12-07 15:05:54 mfeineis

HTML畫布：同時繪製多個getContext

回答

相關問題