画布麻烦改变颜色/清除画布上的按钮点击

问题描述：

我的代码是使用画布，允许人们绘制他们想要的任何东西，我试图实现的是改变他们的颜色按钮点击颜色，默认颜色是黑色我有两个按钮来改变红色和绿色，也是一个清晰的画布按钮，但是这些按钮似乎都不是按钮点击操作。画布麻烦改变颜色/清除画布上的按钮点击

<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 13:13:40

答

你确实有很多错误的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>

也有是：

的<h3>标签的你<body>外标记
您的原始代码底部的javascript位于<body>和<head>标记之外，并且缺少开始<script>标记。
<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>

画布麻烦改变颜色/清除画布上的按钮点击

相关推荐