-1

我有一个画布，它允许人们在画布上画线，试图实现三个按钮来改变他们画的线条的颜色，还有一个按钮来清除画布。第一个代码是我的 html，它初始化画布、按钮，然后调用 javascript 文件： 

<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和RedRect函数范围。尝试contex在 js 代码的第一行使其全局定义。

您还应该尝试编写更具可读性的代码——这将帮助您和其他人找到错误。

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