2012-07-31 91 views
0

我的代碼是使用畫布,允許人們繪製他們想要的任何東西,我試圖實現的是改變他們的顏色按鈕點擊顏色,默認顏色是黑色我有兩個按鈕來改變紅色和綠色,也是一個清晰的畫布按鈕,但是這些按鈕似乎都不是按鈕點擊操作。畫布麻煩改變顏色/清除畫布上的按鈕點擊

<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> 
+0

我希望你不是想知道我很困惑,想知道你的「榜樣」的詳細信息,當我看到這一點:<「JS」腳本類型=「文/ JavaScript的」 SRC => – 2012-07-31 13:13:40

回答

0

你確實有很多錯誤的HTML,像第二<body>標籤以及通過你的代碼</html>一半,兩者都將有完全糊塗了一個瀏覽器,你可以通過Firefox的高尚看試圖讓你的代碼的意義:

<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> 

也有是:

  1. <h3>標籤的你<body>外標記
  2. 您的原始代碼底部的javascript位於<body><head>標記之外,並且缺少開始<script>標記。
  3. <p></p>標籤在您的畫布標籤,似乎沒有做任何事情。

我強烈建議不要在下面查看我的代碼,但首先根據我對它的評論清理您的html。我想你會爲自己做很多事情。

<!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>