画布背景使锚点不可点击

我发现有关用HTML5 canvas元素创建动态背景是否可行的混合证据。这里是谁似乎已经成功地做到了一个人：画布背景使锚点不可点击

我已经成功地定位我的canvas元素作为背景，但它已使我的链接无法点击。这里的情况：

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; 
}

干杯！

来源

2011-12-11 PandemoniumSyndicate

我得到错误* Uncaught TypeError：Object [object Object]没有方法'drawArc'*。请记住'$（）'返回一个jQuery对象（如果您使用的是jQuery）。 –

您是否需要将画布设置为背景的具体方法？我觉得我这样做的方式是一个解决方法，而不是一个适当的实施 – PandemoniumSyndicate

@FelixKling你有jCanvas安装？这是使用我给出的示例材料所必需的api的一部分。我会编辑帖子，以反映 – PandemoniumSyndicate

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

你的HTML更改为以下，它会按预期工作：

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

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

来源

2011-12-11 13:22:53

我将编辑帖子，但我想这意味着我会在代码中的其他地方有一个容器div。我会说清楚。我的坏 – PandemoniumSyndicate

好吧，在这种情况下，请确保'＃background'没有放在'＃container'中。 –

哦，我会给你一个镜头！ – PandemoniumSyndicate

与position: absolute每一个元素都被放置在其他没有放置物品，即使其他元素放置在DOM之后。所以你可以设置position: relative作为你的锚点元素

来源

2011-12-11 13:25:48 haynar

画布背景使锚点不可点击

回答

相关问题