Question

我是编程的新手，我正在尝试使用html，canvas和css文件为类创建项目。概念是画布元素中应该有一个标题屏幕，一旦你点击它就会消失，并显示一个房间，你可以将鼠标悬停在上面并获取信息。

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

老实说，如果有人能帮助我在画布上放一张图像并使其显示鼠标悬停在文本框上的某些区域，那就太棒了。这个想法是，它是一个游戏，你用鼠标“环顾”房间周围的线索。再一次，我对此非常陌生，如果格式怪异，或者我的问题过于荒谬，我很抱歉。

Answer 1

这是你的主要问题：

  window.addEventListener("load",eventWindowLoaded, false);

我之所以这么说，是因为你正在调用evenWindowLoaded函数 - 当页面最初加载时。由于这种情况，无论drawLines（）和其他函数在第一次加载页面时处于什么状态，都将在画布上绘制。

相反，你应该尝试使用它：

var timer = setInterval(function() { eventWindowLoaded(); }, 100);

然后清除画布并重新绘制它。（这是为了悬停效果）

这样，你可以计算出鼠标的光标是否在画布上的某个特定空间之上，然后做任何功能，如果它...这不是100％会起作用，但它是一个大致的概念你可以这样做：

    var mousePos;
    var timer = setInterval(function() { eventWindowLoaded(); }, 100);
    function eventWindowLoaded() {
        context.clearRect(0,0,width,height);
        for (var i=0; i<images.count; ++i) {
           var img = images[i];
           if (Math.Abs(mousePos.x - img.Pos().x)) <= img.width) {
                  if (Math.Abs(mousePos.y - img.Pos().y)) <= img.height) {
                       do_hover_event();
                 }
            }
       }
    }


 function getMousePos(canvas, evt) {
        var rect = canvas.getBoundingClientRect();
        return {
          x: evt.clientX - rect.left,
          y: evt.clientY - rect.top
        };
      }

  canvas.addEventListener('mousemove', function(evt) {
        mousePos = getMousePos(canvas, evt);

}

有一件事 - 这是另一件事：

您将离开canvas / context var的变量定义的范围，为canvas / context尝试此方法 - 使用3个不同的单独函数并在全局范围内定义width，height，theCanvas和context

   var width=1000;
  var height=450;

  var theCanvas = document.getElementById("canvasOne");
  var context = theCanvas.getContext("2d");

 function canvasApp() {
            if (!canvasSupport()) {
                return; 
            } 


     gameLoop();

}

function drawCanvas(){
                context.fillStyle="teal";
                context.fillRect(0,0,width,height);
                setColor();
                drawLines();
 }

 function gameLoop(){
                requestAnimationFrame(gameLoop);
                drawCanvas();
 }

Answer 2

我不确定你到底想要什么，但我解决了画布没有出现在画布上的问题。

问题是，在你的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

画布元素没有显示出来

2 个答案: