Question

我有一个画布，允许人们在画布上绘制这样的线条，试图实现三个按钮来改变线条的颜色，它们的绘图也是一个按钮来清除画布。第一个代码是我的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);
    }

}

Answer 1

context和GreenRect函数范围无法访问变量RedRect。尝试在js代码的第一行创建全局定义contex。

您还应该尝试编写更易读的代码 - 这将有助于您和其他人找到错误。

您还没有script代码中的脚本名称：

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

并在p代码中添加了canvas个不必要的代码：

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

      </p>

</canvas>

按钮单击画布时出现问题

1 个答案: