在onmouseover和onmouseout上更新Canvas內容

Question

我正在使用HTML5創建游戲，在我的工作中，我通常會根據onmouseover和onmouseout更新畫布內容。 onmouseover我正在那樣做

                    cxt.beginPath();
                    cxt.moveTo(10, 10);
                    cxt.lineTo(40, 40);
                    cxt.moveTo(40, 10);
                    cxt.lineTo(10, 40);
                    cxt.stroke();
                    cxt.closePath();
                    content[canvasNumber - 1] = 'Value';

現在和onmouseout事件我想清除畫布的內容而不覆蓋當前內容!!，我該怎么做？！

Answer 1

我想我知道你的意思，但你必須對你的語言更加小心。 你說：

沒有覆蓋當前內容!!

但你剛才畫的X 是當前的內容！ 我認為你真正要說的是“沒有清除以前的內容”。

當然，我們總是會盡力回答您的問題，但在提問時請盡量使用准確而細致的語言。 英語可能不是你的第一語言，你可能比我說第二語言說的更好，但即使你不確定這些詞，即使你不得不用幾種不同的方式說同樣的話，更多的語言是值得的，只是為了確保我們理解。

謝謝！ 現在在答案上。

---

如果要在不覆蓋之前的內容的情況下清除X，則必須保存之前的內容。

為了保存畫布位圖，我們可以使用所謂的“內存中畫布”或“屏幕外畫布”。 您可以使用document.createElement來創建它們，而不是將它們添加到DOM中

下面是發生mouseover時保存位圖的代碼示例，並在發生mouseout時恢復該位圖：

http://jsfiddle.net/simonsarris/uRXeN/