在onmouseover和onmouseout上更新Canvas内容

时间:2012-06-30 10:07:13

标签: canvas html5-canvas

我正在使用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事件我希望清除该画布的内容而不覆盖当前内容!!,我该怎么做?!

1 个答案:

答案 0 :(得分:3)

我想我知道你的意思,但你必须对你的语言更加小心。你说:

  

不覆盖当前内容!!

但你刚刚画出的X 当前内容!我认为你真正要说的是“没有清除之前的内容”。

当然,我们总是会尽力回答您的问题,但在提问时请尽量使用准确而细致的语言。英语可能不是你的第一语言,你可能比我说第二语言说的更好,但即使你不确定这些词,即使你不得不用几种不同的方式说同样的话,更多的语言是值得的,只是为了确保我们理解。

谢谢!现在回答。


如果要在不覆盖之前内容的情况下清除X,则必须保存之前的内容。

要保存画布位图,我们可以使用所谓的“内存中画布”或“屏幕外画布”。您可以使用document.createElement制作这些内容,而不要将它们添加到DOM

以下是mouseover发生时保存位图并在mouseout发生时恢复该位图的代码示例:

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