Problema con el lienzo al cambiar de color/limpiar el lienzo al hacer clic en el botón

My code is using a canvas that allows people to draw whatever they want, what I'm trying to implement is changing the color of what their coloring on button click, default color is black I have two buttons to change ot red and green and also a clear canvas button, none of these seems to operate on button click however.

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

preguntado el 31 de julio de 12 a las 13:07

I hope you're not wondering that I'm confused and want to know more details about your "example" when I see this: <script type="text/javascript" src=".js"></script> -

1 Respuestas

You did have a lot of mis-formed html, like a second <body> tag as well as a </html> half way through your code, either of which would have completely confused a browser as you can see by Firefox's noble attempt to make sense of your code:

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

También hay:

  1. an <h3> tag outside of your <body> etiqueta
  2. your javascript at the bottom of your original code is outside of the <body> y <head> tags as well as lacking an opening <script> etiqueta.
  3. <p></p> tags within your canvas tags that don't seem to be doing anything.

I'd strongly recommend not looking at my code below, but first just trying to clean up your html according to the comments I've made about it. I think you would get a lot out of doing that for yourself.

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

Respondido 31 Jul 12, 22:07

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.