画布元素未显示答案

【问题标题】：Canvas element not showing up画布元素未显示
【发布时间】：2014-12-15 14:10:03
【问题描述】：

我对编程非常陌生，我正在尝试使用 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;
    }

老实说，如果有人能帮我在画布上放一张图片并制作它，这样鼠标悬停在文本框上的某些区域就会出现，那就太棒了。这个想法是，这是一个你用鼠标“环顾”房间寻找线索的游戏。再一次，如果这格式很奇怪或者我的问题太长了，我很抱歉。

【问题讨论】：

标签： html css canvas html5-canvas

【解决方案1】：

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

问题在于，在您的 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】：

这是你的主要问题：

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

我之所以这么说是因为您调用了一次 evenWindowLoaded 函数——当页面最初加载时。既然是这种情况，那么无论 drawLines() 和其他函数在页面第一次加载时处于什么状态，都会在画布上进行绘制。

你应该尝试使用这个：

var timer = setInterval(function() { eventWindowLoaded(); }, 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 个不同的单独函数并在全局范围内定义宽度、高度、theCanvas 和上下文

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

【讨论】：