Javascript 更改颜色/清除按钮上的画布时出现问题单击_Javascript_Html_Button_Canvas_User Interaction

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

javascript html button canvas

Javascript 更改颜色/清除按钮上的画布时出现问题单击,javascript,html,button,canvas,user-interaction,Javascript,Html,Button,Canvas,User Interaction,我的代码使用的是画布，允许人们绘制他们想要的任何东西，我试图实现的是改变按钮点击时的颜色，默认颜色是黑色我有两个按钮来改变红色和绿色，还有一个清晰的画布按钮，但这些似乎都不能在按钮点击时操作 <h3>Draw Something</h3> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Paint Canva

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

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

画东西油画布

你好
函数GreenRect（）{ strokeStyle='green'； stroke（）； } 函数RedRect（）{ strokeStyle='red'； stroke（）； } 函数ImgClr（）{ clearRect（0,060300）； }

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

画东西油画布

你好
函数GreenRect（）{ strokeStyle='green'； stroke（）； } 函数RedRect（）{ strokeStyle='red'； stroke（）； } 函数ImgClr（）{ clearRect（0,060300）； } 还有：

您的

标签外的

标签

原始代码底部的javascript位于

和

标记之外，并且缺少开头的

标记

画布标记中似乎没有任何作用的标记

我强烈建议不要看下面的代码，而是首先根据我对它的评论来清理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>


油画布
//声明全局命名空间
this.DGN={
准备：未定义，
上下文：未定义，
greenRect:未定义，
redRect：未定义，
imgClear：未定义，
笑脸：未定义
};
DGN.prep=函数（）{
if（DGN.context的类型==“未定义”）{
var canvas=document.getElementById（'imageView'）；
if（canvas.getContext）{
DGN.context=canvas.getContext（'2d'）；
} 
}
};
DGN.greenRect=函数（）{
DGN.prep（）；
DGN.context.strokeStyle='green'；
DGN.context.stroke（）；
};
DGN.redRect=函数（）{
DGN.prep（）；
DGN.context.strokeStyle='red'；
DGN.context.stroke（）；
};
DGN.imgClear=函数（）{
DGN.prep（）；
DGN.context.clearRect（0,0600300）；
};
DGN.smileyFace=函数（）{
DGN.prep（）；
console.log（DGN.context）；
DGN.context.beginPath（）；
DGN.context.arc（75,75,50,0，Math.PI*2，true）；//外圈
DGN.context.moveTo（110,75）；
DGN.context.arc（75,75,35,0，Math.PI，false）；//嘴（顺时针）
DGN.context.moveTo（65,65）；
DGN.context.arc（60,65,5,0，Math.PI*2，true）；//左眼
DGN.context.moveTo（95,65）；
DGN.context.arc（90,65,5,0，Math.PI*2，true）；//右眼
DGN.context.stroke（）；
};
画点东西

当我看到以下内容时，希望您不要感到困惑，我想知道有关您的“示例”的更多细节：