我是编程新手，正在尝试使用 html、canvas 和 css 文件为类(class)创建一个元素。这个概念是应该有一个标题屏幕出现在 Canvas 元素中，一旦你点击它就会消失并显示一个房间，你可以将鼠标悬停在这些元素上并获取信息。
我有我想要的 html、canvas 和 css，但是每当我尝试在 canvas 元素中放置一些东西时，它都不会显示。例如，对于标题屏幕，我想绘制一个彩色框并在其中放置一些文本，然后单击它以显示下面的图像。我使用了 drawCanvas，但只有当我在末尾放置一个 gameLoop 时它才会显示。但是当我尝试添加文本时，它就消失了。再一次，我对此真的很陌生，我对我的文字墙感到抱歉，但任何意见或建议都会非常有帮助。这是我的 HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title Page</title>
<link rel="stylesheet" type="text/css" href="css.css"/>
<script src="js/modernizr.js"></script>
<script>
window.addEventListener("load",eventWindowLoaded, false);
function eventWindowLoaded() {
canvasApp();
}
function canvasSupport() {
return Modernizr.canvas;
}
function canvasApp() {
if (!canvasSupport()) {
return;
}
var theCanvas = document.getElementById("canvasOne");
var context = theCanvas.getContext("2d");
var width=1000;
var height=450;
function drawCanvas(){
context.fillStyle="teal";
context.fillRect(0,0,width,height);
setColor();
drawLines();
}
function gameLoop(){
requestAnimationFrame(gameLoop);
drawCanvas();
}
gameLoop();
}
</script>
</head>
<body>
<audio loop="loop" autoplay="autoplay" controls="controls">
<source src="themesong.mp3" type="audio/mpeg">
Your browser does not support the audio content.
</audio>
<!-- Canvas -->
<div id="canvas-container">
<canvas id="canvasOne" width="1000" height="450">
Your browser does not support canvas.
</canvas>
</div>
<!-- ^ End Canvas -->
</body>
</html>
这是我的 CSS:
#canvasOne {
background-color: #cccccc;
border: 10px solid rgba(136, 128, 172, 0.9);
margin-left: 210px;
margin-right: auto;
margin-top: 130px;
#body {
background-image: url("mansion.jpg");
background-repeat: no-repeat;
}
老实说，如果有人能帮我在 Canvas 上放一张图片，然后让鼠标悬停在文本框上的某些区域出现，那就太棒了。这个想法是，这是一个游戏，你可以用鼠标在房间里“看”一圈，寻找线索。再一次，我对此很陌生，如果格式很奇怪或者我的问题太长了，我很抱歉。
最佳答案
我不确定你到底想要什么，但我解决了图像没有出现在 Canvas 上的问题。
问题是，在您的 CSS 上，您正在为背景着色，然后您还在其上放置图像，导致它重叠。
这是我修改过的 CSS 代码:
#canvasOne {
background-image: url("mansion.jpg");
background-repeat: no-repeat;
border: 10px solid rgba(136, 128, 172, 0.9);
margin-left: 210px;
margin-right: auto;
margin-top: 130px;
}
我不知道如何做悬停部分，但你应该看看 this
关于html - Canvas 元素未显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27476540/