html - 将悬停事件与 Canvas 的特定位置对齐

Question

如您所见，我正在尝试为基于地球的动画开发 Canvas 。我想从用户悬停事件的形式提供说明开始。在这里您可以看到我已经设法放置了文本“Instructions”，但是我想移动它，以便它显示在 Canvas 的左上角，与文本“Solar System”对齐。我尝试了各种方法，但似乎没有任何方法可以移动“说明”文本。我还想在将鼠标悬停在“说明”文本下方后更改文本，使其看起来布局合理，甚至可能更改颜色。

我还想知道是否可以将 Canvas 更改为特定背景，即星星穿过；

<canvas style="float:left" ; id="animation-stage"></canvas>
<canvas id="myCanvas" width="1400" height="800"></canvas>
<script>
	/* Sets */
    var can = document.getElementById('animation-stage');
    can.setAttribute('height', window.innerHeight);
    can.setAttribute('width', window.innerWidth);
</script>
</body>
</html>

body {
	overflow: hidden;
	font-family:fantasy;
	font-size:13px;
	color: white;
	background-color: black;
}

span{
    color: #ffffff;
    font-size: 13px;
    height: 160px;
    letter-spacing: 1px;
    line-height: 30px;
    margin: 0 auto;
    position: static;
    text-align: center;
    text-transform: uppercase;
    top: -80px;
    left:-30px;
    display:none;
    padding:0 20px;

}
span:after{
    content:'';
    position:absolute;
    background:#f8f8f8;
    left:50%;
    margin-left:-5px;
}
p{

    margin:100px;
    float:left;
    position:absolute;
		text-transform: uppercase;
		top: 100px;
		left: 0;
    cursor:pointer;

}



p:hover span{
    display:block;
}

h1,h2,h3 {
	margin:10px 0;
}

article {
	padding:20px;
	width:400px;
}

article header {
	font-weight: bold;
}

section {
	padding-bottom: 10px;
	padding-top:10px;
}

span.note {
	display: block;
	/*font-style:italic;*/
	font-size:12px;
}

header{
	position: fixed;
	width: 100%;
}

.container {
	display: inline-block;
}

.container > .info {
	float: left;
}

.container > .info > header {
	padding: 20px;
}

<header>
    <h1 style="text-align: center">Solar System</h1>
    <p>Instructions<span>
    Rotation -	Click and drag in the direction of rotation <br />
    Increase/Decrease Orbit Radius - Up and Down Keys <br />
    Increase/Decrease Orbit Speed - Left and Right Keys <br />
    Translation Of X - Alt plus mouse drag <br />
    Translation Of Y - Shift plus mouse drag <br />
    Translation Of Z - Mouse scroll
    </span></p>
    <h3 style="text-align: center">Web earth</h3>
</header>

Answer 1

移动<p>在屏幕的左上角，您需要修改影响 <p> 的样式像这样:

p {
    margin: 0; /* removed margin */
    position: absolute;
    text-transform: uppercase;
    top: 18px; /* modified top */
    left: 18px; /* modified left */
    cursor: pointer;
}

当您将它移到左上角并将鼠标悬停在“说明”上时，说明会与“太阳系”文本重叠，因此最好提供 <span>黑色background-color .此外，您可以左对齐说明文本以使其更具可读性:

span {
    color: #ffffff;
    font-size: 13px;
    height: 160px;
    letter-spacing: 1px;
    line-height: 30px;
    margin: 0 auto;
    position: static;
    text-align: left; /* left align text */
    text-transform: uppercase;
    top: -80px;
    left: -30px;
    display: block;
    padding: 0 20px;
    background-color: black; /* to prevent clashing of text */
}

这些更改的输出将如下所示(悬停时):

有几种方法可以将背景图像添加到您的 canvas , 但最简单的是简单地设置一个 background-image像这样使用 CSS:

canvas {
    background-image: url("path/to/bg/image.png");
}