캔버스 문제가 버튼 클릭시 캔버스 색상 변경/변경

내 코드는 사람들이 원하는대로 그릴 수있는 캔버스를 사용하고 있으며, 구현하고자하는 것은 버튼 클릭시 기본 색상이 무엇인지 색상을 변경하는 것입니다. 검은 색 나는 빨간색과 초록색을 변경하는 두 개의 단추와 명확한 캔버스 단추가 있지만 이들 중 아무 것도 단추를 클릭하면 작동하지 않는 것 같습니다.캔버스 문제가 버튼 클릭시 캔버스 색상 변경/변경

<h3>Draw Something</h3> 
<!DOCTYPE html> 

<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Paint Canvas</title> 
    <style type="text/css"> 
    <!-- 
    #container { position: relative; } 
    #imageView { border: 1px solid #000; } 
    --> 
    </style> 

</head> 

<body> 

    <div id="container"> 
     <canvas id="imageView" width="600" height="300"> 
       </p> 
     </canvas> 
    </div> 

    <script type="text/javascript" src=".js"></script> 

</html> 

<body > 
    <input type= "button" value= "Green" id= "green" onclick= "GreenRect()" /> 

    <input type= "button" value= "Red" id= "red" onclick= "RedRect()" /> 

     <input type= "button" value= "clear canvas" 
       id= "clear" onclick= "ImgClr()" /> 


     <button id="howdy">Howdy!</button><br> 
</body> 
    function GreenRect() { 
     context.strokeStyle= 'green'; 
     context.stroke(); 
     } 

     function RedRect() { 
     context.strokeStyle= 'red'; 
     context.stroke(); 
     } 

     function ImgClr() { 
     context.clearRect(0,0, 600, 300); 
     } 
     </script>

출처

2012-07-31 LewSim

난 당신이 내가 혼란 스러워요 내가 이것을 볼 때 "예"에 대한 자세한 내용을 알고 싶은 것을 궁금해하지 않는 희망 –

당신은 두 번째 <body> 태그와 같은 잘못 형성된 HTML의 많은뿐만 아니라 파이어 폭스의 귀족에 의해 볼 수 있듯이 완전히 혼란 브라우저를 것 둘 중 하나의 코드를 통해 </html> 절반 방법을 가지고 있었다 당신의 <body>를 외부

<h3> 태그 :

<html lang="en"><head></head><body><h3>Draw Something</h3> 
    <meta charset="utf-8"> 
    <title>Paint Canvas</title> 
    <style type="text/css"> 
    <!-- 
    #container { position: relative; } 
    #imageView { border: 1px solid #000; } 
    --> 
    </style> 
    <div id="container"> 
     <canvas id="imageView" width="600" height="300"> 
       <p></p> 
     </canvas> 
    </div> 
    <script type="text/javascript" src=".js"></script> 

    <input type="button" value="Green" id="green" onclick="GreenRect()"> 
    <input type="button" value="Red" id="red" onclick="RedRect()"> 
    <input type="button" value="clear canvas" id="clear" onclick="ImgClr()"> 
    <button id="howdy">Howdy!</button><br> 

    function GreenRect() { 
     context.strokeStyle= 'green'; 
     context.stroke(); 
    } 

    function RedRect() { 
     context.strokeStyle= 'red'; 
     context.stroke(); 
    } 

    function ImgClr() { 
     context.clearRect(0,0, 600, 300); 
    } 
</body></html>

도있다 : 코드의 의미를 시도 태그

원래 코드 하단의 자바 스크립트는 <script> 태그가없고, <body> 및 <head> 태그 외부에 있습니다.
<p></p> 캔버스 태그 내에 아무 것도 보이지 않는 태그가 있습니다.

난 강력하게 아래에있는 내 코드를 찾고 있지만, 첫번째 그냥 그것에 대해 만들어 놓은 의견에 따라 HTML을 정리하는 것을 시도하지 않는 것이 좋습니다 것입니다. 나는 너 자신을 위해 그것을 많이하지 않을 것이라고 생각한다. < "JS."= "텍스트/자바 스크립트"SRC = 스크립트 유형> :

<!DOCTYPE html> 

<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>Paint Canvas</title> 

     <script type="text/javascript"> 
     //declare global namespace 
     this.DGN = { 
      prep: undefined, 
      context: undefined, 
      greenRect: undefined, 
      redRect: undefined, 
      imgClear: undefined, 
      smileyFace: undefined 
     }; 

     DGN.prep = function(){ 
     if(typeof DGN.context === "undefined") { 
      var canvas = document.getElementById('imageView'); 

       if (canvas.getContext){ 
        DGN.context = canvas.getContext('2d'); 
       } 
      } 
     }; 


     DGN.greenRect = function () { 
      DGN.prep(); 

      DGN.context.strokeStyle = 'green'; 
      DGN.context.stroke(); 
     }; 


     DGN.redRect = function () { 
      DGN.prep(); 

      DGN.context.strokeStyle = 'red'; 
      DGN.context.stroke(); 
     }; 


     DGN.imgClear = function() { 
      DGN.prep(); 

      DGN.context.clearRect(0, 0, 600, 300); 
     }; 


     DGN.smileyFace = function() { 
      DGN.prep(); 

      console.log(DGN.context); 
      DGN.context.beginPath(); 
      DGN.context.arc(75,75,50,0,Math.PI*2,true); // Outer circle 
      DGN.context.moveTo(110,75); 
      DGN.context.arc(75,75,35,0,Math.PI,false); // Mouth (clockwise) 
      DGN.context.moveTo(65,65); 
      DGN.context.arc(60,65,5,0,Math.PI*2,true); // Left eye 
      DGN.context.moveTo(95,65); 
      DGN.context.arc(90,65,5,0,Math.PI*2,true); // Right eye 
      DGN.context.stroke(); 
     }; 


     </script> 

    </head> 
    <body> 
     <h3>Draw Something</h3> 
     <div id="container"> 
      <canvas id="imageView" width="600" height="300"> 
      </canvas> 
     </div> 

     <input type="button" value="Green"  id="green"  onclick= "DGN.greenRect()" /> 
     <input type="button" value="Red"   id="red"  onclick= "DGN.redRect()" /> 
     <input type="button" value="clear canvas" id="clear"  onclick= "DGN.imgClear()" /> 
     <input type="button" value="Smiley Face" id="smileyFace" onclick= "DGN.smileyFace()" /> 

    </body> 
</html>

출처

2012-07-31 14:59:56 AJP

캔버스 문제가 버튼 클릭시 캔버스 색상 변경/변경

답변

관련 문제