在 onmouseover 和 onmouseout 上更新 Canvas 内容

Posted

技术标签:

【中文标题】在 onmouseover 和 onmouseout 上更新 Canvas 内容【英文标题】:Updating Canvas content on onmouseover and onmouseout 【发布时间】:2012-06-30 10:07:12 【问题描述】:

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

【问题讨论】:

我不明白你在问什么——你想清除内容而不覆盖内容? 没错! ,我想在 onmouseover 事件之前将画布设置为之前的状态 【参考方案1】:

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

不覆盖当前内容!!

但是你刚才画的X当前内容!我认为您的真正意思是“不清除以前的内容”。

当然,我们会尽最大努力回答您的问题,但请您在提问时尽量使用准确和谨慎的语言。英语可能不是你的第一语言,你可能比我说我的第二语言说得更好,但即使你不确定单词,即使你必须用几种不同的方式说同样的话,更多的语言只是为了确保我们理解是值得的。

谢谢!现在就来回答吧。


如果您想清除 X 而不覆盖之前的内容,则必须保存之前的内容。

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

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

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

【讨论】:

非常感谢您的回答,它对我帮助很大:)

以上是关于在 onmouseover 和 onmouseout 上更新 Canvas 内容的主要内容,如果未能解决你的问题,请参考以下文章

onmouseover 和 onmouseleave 在图像映射上随机触发

在 onmouseover 和 onmouseout 上更新 Canvas 内容

事件冒泡以及onmouseenter 和 onmouseover 的不同

Reactjs onMouseOver 和 onMouseOut 事件循环在尝试 Popover

关于onmouseover和onmouseout的bug

关于onmouseover和onmouseout的bug