-1

私は、人々がキャンバス上に線を描くことを可能にするキャンバスを持っています.3つのボタンを実装して、線の色を変更し、キャンバスをクリアするボタンも実装しようとしています。最初のコードは、キャンバス、ボタンを初期化し、javascript ファイルを呼び出す私の html です。 

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Paint Canvas</title>
    <style type="text/css"><!--
      #container { position: relative; }
      #imageView { border: 3px 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>

    <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

JavaScriptコードは次のとおりです。

//Call Window onload
if (window.addEventListener) {
    window.addEventListener('load', function() {
        var canvas, context, tool;

        function init() {
            // Find Canvas
            canvas = document.getElementById('imageView')
            if (!canvas) {
                alert('Error: I cannot find the canvas element!');
                return;
            }

            if (!canvas.getContext) {
                alert('Error: no canvas.getContext!');
                return;
            }

            context = canvas.getContext('2d');
            if (!context) {
                alert('Error: failed to getContext!');
                return;
            }

            //Instance of drawing tool
            tool = new tool_pencil();

            // Enables mousedown, mousemove, and mouseup event
            canvas.addEventListener('mousedown', ev_canvas, false);
            canvas.addEventListener('mousemove', ev_canvas, false);
            canvas.addEventListener('mouseup', ev_canvas, false);
        }

        function howdy() {
            alert("Howdy!");
        }

        //drawing tool works like a simulated drawing
        function tool_pencil() {
            var tool = this;
            this.started = false;

            /* function event that initializes when mousedown and
             starts drawing tool on mousedown*/
            this.mousedown = function(ev) {
                context.beginPath();
                context.moveTo(ev._x, ev._y);
                tool.started = true;
            };

            // draws on function mousemoves and sets a specific color and width
            // to line

            this.mousemove = function(ev) {
                if (tool.started) {
                    context.lineTo(ev._x, ev._y);
                    context.stroke();
                    context.strokeStyle = '#FF4500';
                    context.lineWidth = 8;
                    context.fillStyle = 'blue';
                    context.fill();
                }
            };

            // mouseup function, stops drawing
            this.mouseup = function(ev) {
                if (tool.started) {
                    tool.mousemove(ev);
                    tool.started = false;
                }
            };
        }

        /* finds mouse position on canvas*/
        function ev_canvas(ev) {
            if (ev.layerX || ev.layerX == 0) {
                ev._x = ev.layerX;
                ev._y = ev.layerY;
            } else if (ev.offsetX || ev.offsetX == 0) {
                ev._x = ev.offsetX;
                ev._y = ev.offsetY;
            }

            var func = tool[ev.type];
            if (func) {
                func(ev);
            }
        }

        init();

    }, false);

    function GreenRect() {
        context.strokeStyle = 'green';
        context.stroke();
    }

    function RedRect() {
        context.strokeStyle = 'red';
        context.stroke();
    }

    function ImgClr() {
        context.clearRect(0, 0, 600, 300);
    }

}
4

1 に答える 1

1

変数contextは関数スコープGreenRectに到達できません。jsコードの最初の行でRedRectグローバル定義にしてみてください。contex

また、より読みやすいコードを書くように努めるべきです。これは、あなたや他の人がバグを見つけるのに役立ちます。

scriptまた、タグにスクリプト名がありません:

<script type="text/javascript" 
             src=".js">
</script>

タグに不要なpタグがありますcanvas：

<canvas id="imageView" width="600" height="300">

      </p>

</canvas>
于 2012-07-31T19:05:01.660 に答える