单击按钮更改颜色/清除画布时画布出现问题

Canvas trouble changing color/clearing canvas on button click

本文关键字：布时画布出现问题清除按钮颜色单击更新时间：2024-05-17

我的代码使用的是一个画布，它允许人们绘制他们想要的任何东西，我试图实现的是更改他们点击按钮时的颜色，默认颜色是黑色。我有两个按钮要更改为红色和绿色，还有一个清晰的画布按钮，但这些按钮似乎都不能在点击按钮时操作。

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

你的代码中确实有很多格式错误的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>

还有：

<body>标记之外的<h3>标记
原始代码底部的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>