【发布时间】：2016-08-27 21:03:59
【问题描述】：
我有这个想法，您只能在网站上看到黑色，但是当您将鼠标悬停在该网站上时，它会显示一个径向渐变白色圆圈，显示其下方的菜单项，例如“联系人”、“信息”和“产品”。当你点击“产品”时，页面上的所有项目都会出现，但它们仍然隐藏在黑色之下，只有当你将鼠标悬停在它上面时才会显示。如果您点击任何产品，您可以通过a标签链接进入产品页面。
所以我得到了这两个部分 - 1）用渐变圆圈显示东西，2）点击“产品”后显示的产品 - 工作，但是当产品出现时，带有渐变的画布部分卡住了。这可能是因为我试图通过分离这两个交互来以一种 hacky 的方式做到这一点，如下所示：
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="./assets/stylesheet/normalize.css">
<link rel="stylesheet" type="text/css" href="./assets/stylesheet/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>
<body>
<div id="menu">
<div class="menu-item" id="products"><a>Products</a></div>
<div class="menu-item" id="contact"><a href="./contact.html">News</a></div>
</div>
<script>
// create a full screen canvas
var canvas = document.createElement("canvas");
canvas.style.position = "absolute";
canvas.style.left = "0px";
canvas.style.top = "0px";
canvas.style.zIndex = 10;
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.body.appendChild(canvas);
// var to hold context
var ctx;
// load an image
var image = new Image();
image.src = "./assets/images/white.jpg";
// add resize event
var resize = function(){
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
ctx = canvas.getContext("2d");
}
// add mouse event. Because it is full screen no need to bother with offsets
var mouse = function(event){
posX = event.clientX;
posY = event.clientY;
}
// incase the canvas size is changed
window.addEventListener("resize",resize);
// listen to the mouse move
canvas.addEventListener("mousemove",mouse);
// Call resize as that gets our context
resize();
// define the gradient
var cirRadius = 300;
var posX = 100; // this will be set by the mouse
var posY = 100;
var RGB = [11,11,11] ; // black any values from 0 to 255
// var alphas = [0,0,0.2,0.5,0.9,0.95,1]; // zero is transparent one is not
var alphas = [0,0,0.1,0.5,1];
// the update function
var update = function(){
if(ctx){ // make sure all is in order..
if(image.complete){ // draw the image when it is ready
ctx.drawImage(image,0,0,canvas.width,canvas.height)
}else{ // while waiting for image clear the canvas
ctx.clearRect(0,0,canvas.width,canvas.height);
}
// create gradient
var grad = ctx.createRadialGradient(posX,posY,0,posX,posY,cirRadius);
// add colour stops
var len = alphas.length-1;
alphas.forEach((a,i) => {
grad.addColorStop(i/len,`rgba(${RGB[0]},${RGB[1]},${RGB[2]},${a})`);
});
// set fill style to gradient
ctx.fillStyle = grad;
// render that gradient
ctx.fillRect(0,0,canvas.width,canvas.height);
}
requestAnimationFrame(update); // keep doing it till cows come home.
}
// start it all happening;
requestAnimationFrame(update);
</script>
<script>
$("#products").click(function(){
$("#products").remove();
var diagram = document.createElement("div");
diagram.style.position = "absolute";
diagram.style.left = "0px";
diagram.style.top = "0px"
diagram.style.zIndex = 100;
diagram.style.width = window.innerWidth + "px";
diagram.style.height = window.innerHeight + "px";
document.body.appendChild(diagram);
var products = [{
titleShort: "Black",
mainImage: "N/A",
link: "./black.html"
}, {
titleShort: "White",
mainImage: "N/A",
link: "./white.html"
}, {
titleShort: "Red",
mainImage: "N/A",
link: "./red.html"
}, {
titleShort: "Blue",
mainImage: "N/A",
link: "./blue.html"
}]
for (var i = 0; i < products.length; i++) {
var product = document.createElement("div");
diagram.appendChild(product);
productstyle.position = "absolute";
product.style.width = "120px";
product.style.height = "50px";
product.style.top = i * 100 + "px";
product.style.left = i * 100 + "px";
product.style.textAlign = "center";
var circle = document.createElement("a");
circle.style.width = "15px";
circle.style.height = "15px";
circle.style.borderRadius = "50%";
circle.style.backgroundColor = "black";
circle.style.marginLeft = "auto";
circle.style.marginRight = "auto";
circle.href = products[i].link;
product.appendChild(circle);
}
});
</script>
</body>
</html>
注意：为方便起见，所有产品仅用圆点/圆圈表示。
最好将两个部分合并到一个画布中。例如，现在我们将那个白色图像作为画布的背景，如果在某些方面我们可以用产品更新图像？但我对画布很陌生，因此不知道该怎么做。也欢迎任何其他建议。
【问题讨论】：
-
为什么要为此使用画布？我会使用 CSS 的
border-radius，以及简单地更改显示，例如.someClassName{display: none;}和.someClassName:hover{display:block;}。 -
@PHPglue 感谢您的输入，但我不确定您是否理解我要做什么...我希望所有项目都出现，尽管它们隐藏在黑暗中。当您悬停时，您“看穿”黑暗以看到物品。在您的方法中，渐变圆如何显示黑色？
-
@markE 请去掉重复标记；这不是同一个问题的重复。在您提供的另一个问题中，用户根本不与背景中的图像进行交互，并且图像始终保持不变；在我的问题中，用户实际上可以点击背景图片的不同部分来访问不同的页面。
-
@practicemakesperfect。恕我直言，dup question 似乎回答了您的问题标题（渐变圆显示），而您的其余问题是询问有关如何点击链接到您的产品页面的设计建议——但我们不提供设计建议堆栈溢出！无论如何，与我的意见相反...删除了 dup 标志。 :-)
-
@markE 谢谢！是的，很难把它总结成一个标题。但我不认为这是一个设计问题。目前，如果你实现我所拥有的，渐变会在产品出现时卡住，因为产品出现在画布的顶部。我想知道如何将产品隐藏在画布下，但仍然可以点击。
标签： javascript svg canvas html5-canvas dom-events