HTML5中國象棋棋子和棋子

我有一個關於中國象棋的項目。首先，我必須在船上創建一個棋盤和大約32個棋子。我應該使用1個畫布創建紙板，然後在其上繪製32個圖像，或者創建1個畫板畫布，然後創建32個畫布，每個畫布爲1個棋子。因爲我想拖拽chessmans，但是如果只使用1個畫布，我不得不重新繪製太多的棋子。我該怎麼做，你可以給我一些建議，或給我一些相同的教程。謝謝！HTML5中國象棋棋子和棋子

來源

2014-01-23 Windranger

KineticJS是一個Javascript庫，它可以幫助你。它支持在畫布上拖動東西等。下面是一個簡單的使用Kinetic和HTML5畫布的教程：http://www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-tutorial/

來源

2014-01-23 04:51:54 mjkaufer

我正在檢查它，ty。是否有可能創建一個圖像作爲背景，然後另一個圖像拖動它（保持背景）？ – Windranger

當然。看看這個頁面：http://www.w3schools.com/tags/canvas_drawimage.asp – mjkaufer

這可能是一個偏好問題，因此請帶上一粒鹽。我只會使用一個畫布並將其直接繪製到它上面。

在大多數遊戲（包含HTML 5）中，渲染都是漂亮的「煙霧和鏡子」，真實的數據存儲在幕後的醜陋結構中。嘗試使用多個畫布會拉出一些數據（特別是位置）並將其混淆在渲染層中。雖然這可能仍然有效，但如果您在幕後保留數據，並使用數學確定渲染位置以及鼠標單擊是否擊中對象，並且您需要，您可以更好地控制發生的情況開始拖動。

來源

2014-01-23 05:11:35

我實現了1個畫布，並在其上繪製圖像。我重畫了一個棋子（在當前位置畫板，然後畫出棋子的新位置），但是當快速拖動時，它並不像預期的那樣平滑。我想知道，我應該重繪所有的棋子還是隻有1個。 – Windranger

如果您只處理32張圖像，則應該很好地在每一幀都重新繪製它們。 –

是的，但我也必須重新繪製板子。它使屏幕閃爍..任何解決方案，以保持董事會的背景，只是重繪西洋棋棋子？ – Windranger

HTML5中國象棋棋子和棋子

回答

相關問題