画布背景使锚点无法点击答案

【问题标题】：canvas background makes anchors unclickable画布背景使锚点无法点击
【发布时间】：2011-12-11 21:25:48
【问题描述】：

我发现了关于使用 HTML5 画布元素创建动态背景是否可行的各种证据。这里有一个人似乎已经成功地做到了：

我已成功地将我的画布元素定位为背景，但它使我的链接无法点击。情况如下：

HTML：

<div id='container'>

... other header stuff ...
   <canvas id='background'>
   </canvas>

   <!-- Can't touch this *MC Hammer Shuffle* -->
   <a href='#'>test</a>
... footer stuff ...

</div>

CSS：

/* Everything's z-index is now 1 */
#container
{
position: relative;
min-height:100%;
width:100%;
z-index:1; 
}

/* Make the canvas z-index 0 */
#background
{
position: absolute;
top: 0;
width:100%;
height:100%;
z-index: 0;
}

JavaScript：

 // Onload Draw an ellipse
// I've got jCanvas installed (jQuery plugin) to use the drawArc() method
// This bit can be replaced with whatever test code you want. 
function load()
{
init_canvas();
$("canvas").drawArc({
        fillStyle: "black",
         x: 100, y: 100,
          radius: 50
    });
}

// Make the canvas the appropriate size
function init_canvas()
{
canvas = document.getElementById("background");
    canvas.width = document.width;
    canvas.height = document.height;
    canvasW = canvas.width;
    canvasH = canvas.height;
}

干杯！

【问题讨论】：

我收到错误 Uncaught TypeError: Object [object Object] has no method 'drawArc'。请记住，$() 返回一个 jQuery 对象（如果您使用的是 jQuery）。
是否有特定的方法需要将画布设置为背景？我觉得我的做法是一种变通方法，而不是正确的实施方式
@FelixKling 你安装了 jCanvas 吗？这是使用我给出的示例内容所必需的 api 的一部分。我将编辑帖子以反映这一点
啊……我猜就是这样；）
发布了编辑，糟糕。可以用任何可以确保 Canvas 正常工作的东西来替换该部分。只需标准的 javascript 即可。我只想和 Canvas 一起学习 jQuery

标签： javascript css html canvas

【解决方案1】：

您在 CSS 中使用 #container 将其他所有内容的 z-index 设为 1，但您从未将元素 #container 放在页面上。

将您的 HTML 更改为以下内容，它将按预期工作：

<canvas id='background'></canvas>
<div id="container">
    <a href='#'>test</a>
</div>

JSFiddle：http://jsfiddle.net/ht6c8/

【讨论】：

我将编辑帖子，但我认为这暗示我将在代码的其他地方有一个容器 div。我会说清楚的。我的坏
好的，在这种情况下，请确保#background 没有放在#container 中。
哦，那我试试看！

【解决方案2】：

每个带有position: absolute 的元素都被放置在其他未定位的项目之上，即使其他元素随后被放置在 DOM 中。所以你可以为你的锚元素设置position: relative

【讨论】：