画布中的画布可以轻松地从主画布中清除吗?

时间:2011-09-10 18:58:29

标签: javascript html5 canvas

我目前正在开发一个界面,我有一个800x800大小的主画布。在顶部,我生成了一堆图标。当用户将鼠标悬停在顶部的图标上时,它会匹配鼠标的x和y坐标,以确定他当前是否悬停在任何图标上。如果他是,我希望有一个悬停效果,其中标签出现在鼠标旁边,并带有图标的名称。当他移动时,标签跟随鼠标。如果他离开图标或移动到另一个图标,则清除最后一个图标,并且不显示任何标签(如果用户移开所有图标),或者在最后一个位置鼠标旁边显示另一个标签(如果他将鼠标悬停在另一个图标上,则标签的宽度是可变长度,具体取决于文本的宽度。)

排序和显示这些图标的过程都发生在与其他画布渲染的单独对象中,因此我不想完全渲染整个对象以在每次{{1}时显示图标事件触发器,所以我想知道是否有一种方法可以绘制到另一个“临时”画布上下文,以及是否可以轻松清除它。当鼠标移动时,主画布上没有留下任何痕迹?任何人都可以指向我这样的例子的方向或建议我应该如何完成这类任务?

1 个答案:

答案 0 :(得分:0)

是的,您当然可以将其绘制到临时(内存中)画布上。这有很多种原因,你的可能是有效的(特别是如果你没有任何改变的背景)。但它可能不是最容易实现的,如果不了解您的应用程序,很难说。

你应该考虑一个不错的选择:你可以有两个尺寸为800x800的画布重叠在彼此之上。这对于某些应用程序(如游戏)非常有用,在这些应用程序中,背景,前景和中间地面都有不同的移动部分(但背景部分很少移动,前景并不总是存在,等等)

以同样的方式,您可以“分层”您的画布应用程序,图标位于一个画布上,而应用程序的背景和其他部分位于另一个画布上。