0

私のコードは、人々が好きなものを描くことができるキャンバスを使用しています。私が実装しようとしているのは、ボタンのクリック時に色を変更することです。デフォルトの色は黒です。赤と緑を変更する2つのボタンと、クリアキャンバスボタンですが、これらはどれもボタンクリックでは動作しないようです。

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

1 に答える 1

0

<body>2 番目のタグ</html>やコードの途中など、誤った形式の 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>
于 2012-07-31T14:59:56.710 に答える