캔버스 요소가 나타나지 않습니다.

저는 프로그래밍에 익숙하지 않으며 html, canvas 및 css 파일을 사용하여 클래스 프로젝트를 만들려고합니다. 개념은 캔버스 요소에 나타나는 제목 화면이 있어야만 클릭하면 사라지고 마우스를 가져 가서 정보를 얻을 수있는 요소가있는 방을 나타냅니다.캔버스 요소가 나타나지 않습니다.

나는 캔버스 요소에 무엇인가 넣으려고 할 때마다 html, 캔버스 및 CSS를 사용하지만 표시되지 않습니다. 마찬가지로, 제목 화면에서 색 상자를 그려서 텍스트를 넣은 다음 아래쪽 이미지를 표시하려면 클릭하십시오. 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; 
    }

마우스가 가리킬 특정 지역 텍스트 상자가 나타납니다, 멋진 것입니다. 아이디어는 단서를 찾기 위해 마우스로 방 주변을 "둘러 보는"게임이라는 아이디어입니다. 그리고 또 다시, 나는 이것이 매우 이상하게 포맷되어 있거나 내 질문이 너무 터무니없이 길다면이 일에 매우 익숙하다.

출처

2014-12-15 Remi

이 주요 문제 :

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

난 당신이 한 번 evenWindowLoaded 함수를 호출하기 때문에 즉 말하는 이유 - 페이지가 처음로드 할 때. 이 경우부터 페이지가 처음으로로드 될 때 drawLines() 및 다른 함수가있는 상태가 캔버스에 그려집니다.

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

을 다음 캔버스를 취소하고 다시 그릴 :

대신이 사용하려고합니다. (이것은 호버 (hover) 효과입니다)

그런 식으로 마우스 커서가 캔버스의 특정 공간 위에 있으면 계산할 수 있습니다. 그렇다면 기능을 수행하십시오. 이것이 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); 

}

한 가지 그게 전부 - 여기에 또 다른입니다 :

캔버스/컨텍스트 var에의에 대한 변수 정의의 범위를 떠나

시도 캔버스/문맥에 대한이 메소드 - 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(); 
}

출처

2014-12-15 02:34:21 mike510a

정확하게 원하는 것은 무엇인지 모르겠지만 이미지가 캔버스에 나타나지 않는 문제가 수정되었습니다.

문제는 CSS에서 배경을 채우는 것이고 이미지를 겹쳐서 겹쳐지게하는 것입니다.나는 호버 부분을 수행하는 방법을 알고 있지만 당신이 this

에 보일 것입니다 해달라고

#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; 
    }

: 여기

내가 변경 한 CSS 코드

출처

2014-12-15 02:53:27

캔버스 요소가 나타나지 않습니다.

답변

관련 문제