【发布时间】：2011-03-30 20:16:17
【问题描述】：
我有一个宏伟的计划来制作这个带有所有这些花里胡哨的酷网站，我决定使用 HTML canvas b/c 它提供了很大的灵活性。然而，随着时间的推移，我开始意识到我只是在重新发明轮子，例如手动实现或集成：
- 鼠标/键盘事件
- 用户（文本）输入
- 简单动画（即淡入淡出）
- 按钮、下拉菜单
第一个，尤其是让人们意识到我们对onmouseover 之类的东西是多么的理所当然。我了解画布的用途——松散地收集在像素操作的保护伞下——所以我想为了缩短这个咆哮，我的问题是：有没有人认为画布不能很好地与HTML5？在我的脑海中，这里有两个基本的东西可以很好地嵌入到画布中（如果它们已经包含，请随时纠正我）
- 嵌入其他网站：例如，如果我有一个星形，我想连接它的
onlcick函数来加载一个网页，然后使用context.beginPath和context.clip函数将星形'镂空' 所以网站在星号内可见。这可以通过将画布放在 html 页面上（在浮动框架内）并具有透明背景在画布中实现，但是如果我想要一个 10x10 星的网格，所有这些都有自己的网站呢？如果我想缩放每个网页的大小怎么办？ - 非矩形元素/小部件：我尝试解决的一件事是圆形文本编辑器。这可以通过
context.beginPath和context.clip函数实现，在后台使用textentry或textarea，但是，信号被画布捕获，并且不会传递到可见的，但仍然是底层的@ 987654329@ 或textentry元素。从技术上讲，可以捕获每个信号，对其进行评估，从中生成新信号，并将其传递给所需的目标，但我根本无法让它工作。如果有办法将 html 元素嵌入到画布形状中，那将非常有用。 [编辑]另外，我忘了提到不能塑造实际的画布元素。例如，如果您在窗口中间画了一个圆圈，画布仍然是一个矩形，圆圈之外的区域仍然会遮挡底层内容和/或捕获用户生成的事件
【问题讨论】：
-
投票结束，因为这并不是一个可以明确回答的问题。它似乎更像是一个模糊的咆哮或 HTML5 画布不适合的东西的列表。请注意，HTML5 Canvas 并不是要取代 HTML，而更像是绘制自己的
<img>或视频的好方法。 IMO，没有理由在画布中重新实现<button>；只需创建一个 HTML 按钮并将其放置在您喜欢的位置。如果你想要一个保留模式的图形 API（像mouseover这样的东西会为你处理），你可能还想看看 SVG。 -
@Phrogz：我尝试了在画布中实现按钮的方法，但它有几个问题。一，它遮挡了画布，所以你不能在按钮顶部有画布动画。第二，双击画布时会弹出奇异的亮点（在此处尝试）。该按钮将突出显示。
-
a) 这是一个合理的观点，希望当 CSS3
pointer-events:none允许您在按钮上叠加另一个画布而不捕捉鼠标点击时解决这个问题，并且 b) 听起来像你'当您希望它们被捕获时，没有正确禁用用户选择事件。 -
@Phrogz: wrt b) 我知道你可以通过返回 false 来禁用事件级联，但我的论点是这需要大量的微观管理。按下按钮，我们必须跟踪我们何时在画布内，以便在用户双击时停止级联，但是当我们离开画布时我们必须记住将其重新打开。我不喜欢这种微观管理
标签： html canvas integration