我製作了一個遊戲板,我想拖放我的作品(.gif),但是我無法找到辦法做到這一點,無需重新繪製整個板子,因爲我必須每次都清理一塊它移動1個像素,並清除它下面的任何東西(棋盤和其他棋子)。它甚至有可能嗎?移動圖像在<canvas>而不重繪整個畫布?
3
A
回答
6
是的,您每次都需要重繪整個板子。您可以使用
一種技術是離屏畫布:
var board = document.createElement("canvas");
board.width = width;
board.height = height;
var boardContext = board.getContext("2d");
// rendering code for board
// ...
// now draw board onto main canvas
var context = mainCanvas.getContext("2d");
context.drawImage(board, ...);
董事會畫布是不是在屏幕上可見,但使每一次,你需要重新渲染,它會被存儲在內存中呈現非常快。
相關問題
- 1. 畫布不重繪圖像
- 2. 使用畫布僅顯示繪製的圖像而不顯示整個畫布
- 3. 在畫布上重繪圖像
- 4. 在畫布上繪圖以編程方式使圖像移動
- 5. 在HTML5畫布中滾動(不移動圖像)圖像
- 6. HTML5畫布圖像不移動
- 7. 如何在HTML5畫布上移動繪製的圖像?
- 8. 如何在html5畫布上繪製移動的重複圖案
- 9. Java圖形 - 重繪圖像而不移除其他圖像
- 10. 安卓佈局在動畫移動後重新設置重繪
- 11. 用KeyPressed在畫布上移動圖像
- 12. 如何在畫布內移動圖像
- 13. 在javascript畫布上移動圖像
- 14. 在畫布中以角度繪製圖像而不旋轉畫布
- 15. 動畫圖像,但圖像不移動
- 16. 畫布Html5繪圖應用程序,移動畫布導致重大問題
- 17. 填充畫布的JavaScript圖像,而不必重疊圖像
- 18. UIView子類重繪UIBezierPath而不重繪整個視圖
- 19. HTML5畫布繪製圖像
- 20. Sketch.js移動網頁的繪圖畫布重置ontouch
- 21. 在畫布中繪圖變爲偏移
- 22. 在畫布上繪圖時的偏移
- 23. JavaFX畫布不是繪製圖像
- 24. html畫布繪製圖像不工作
- 25. 多畫布不繪製圖像
- 26. HTML5畫布繪製多個圖像
- 27. 畫布 - 移動圖像問題
- 28. HTML5畫布圖像移動閃爍
- 29. 如何移動畫布上的圖像?
- 30. 畫布圖像對象與style.left移動
如果您希望生成的圖形元素保持並交互,請考慮使用SVG而不是畫布。 – robertc 2011-04-30 11:00:51