Question

所以我是javascript和初学程序员的新手。我知道初始化子程序总是先行。我不明白为什么子程序没有运行。我想知道初始化子程序中的任何变量是否可以用在任何其他子程序中。我正在尝试使用Bresenham线算法制作一个程序。

<html>

  <head>

    <body>
      <canvas id="canvas" width="500" height="500" style="border: 1px solid black;" onclick="coordinates(event)">></canvas>
    </body>

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
      intialization();
      drawGrid();
      mouseClick();
      //Intialization--------------------------------
      //Intialization--------------------------------
      function intialization() {
        var cnv = document.getElementById("canvas");
        var Width = cnv.width;
        var Height = cnv.height;
        var ctx = cnv.getContext('2d');
        var click_counter = 0; //switching between storing first and second point coordinates
        p1x = 0; //stores user's click on canvas
        p1y = 0; //stores user's click on canvas
        p2x = 0; //stores user's click on canvas
        p2y = 0; //stores user's click on canvas
      }
      //Intialization--------------------------------
      //GRID---------------------------------
      function drawGrid() {
        var gridLines = {
          Lines: {
            space: 10,
            // color: "'#xxxxxx'"
          }
        };
        drawGridLines(cnv, gridLines.Lines);
        return;
      }

      function drawGridLines(cnv, lineOptions) {
        ctx.strokeStyle = lineOptions.color;
        ctx.strokeWidth = 1;
        ctx.beginPath();
        var counter = null;
        var i = null;
        var x = null;
        var y = null;
        counter = Math.floor(Width / lineOptions.space);
        for (i = 1; i <= counter; i++) {
          x = (i * lineOptions.space);
          ctx.moveTo(x, 0);
          ctx.lineTo(x, Height);
          ctx.stroke();
        }
        counter = Math.floor(Height / lineOptions.space);
        for (i = 1; i <= counter; i++) {
          y = (i * lineOptions.space);
          ctx.moveTo(0, y);
          ctx.lineTo(Width, y);
          ctx.stroke();
        }
        ctx.closePath();
        return;
      }
      //GRID---------------------------------
      //MOUSE---------------------------------
      function mouseClick {
        if (click_counter = 0) {
          function coordinates(event) {
            var x1 = event.offsetX;
            var y1 = event.offsetY;
            p1x = x1;
            p1y = y1;
            console.log("x coords: " + p1x + ", y coords: " + p1y);
          } else

          function coordinates(event) {
            var x1 = event.offsetX;
            var y1 = event.offsetY;
            p2x = x1;
            p2y = y1;
            console.log("x coords: " + p2x + ", y coords: " + p2y);
          }
        }
        //MOUSE---------------------------------
        //MOUSE---------------------------------

    </script>

  </head>

</html>

Answer 1

在文档加载之前，正在调用初始化和drawGrid函数，因此这将失败。你应该使用jquery方法 -

    $(document).ready(function(){
             //callyour functions here
    })

您遇到的另一个问题是您正在尝试使用超出范围的变量。比如cnv。你应该在js的顶部声明一个像canvas这样的对象：

canvas = {}

并将要共享的所有变量添加到此。例如：

canvas.cnv = document.getElementById("canvas");
canvas.Width = canvas.cnv.width;
canvas.Height = canvas.cnv.height;
canvas.ctx = canvas.cnv.getContext('2d');

以下是如何使用画布的简单示例：

<html>

  <head>

      <script src="index.js"></script>
    <body>
      <canvas id="canvas" width="500" height="500" style="border: 1px solid black;" onmousemove="mouseClick(event)">></canvas>
    </body>

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script>
         canvas = {}
         var isMouseDown = false;

        document.addEventListener('mousedown', function(event) {
            if ( event.which ) isMouseDown = true;
        }, true);

        document.addEventListener('mouseup', function(event) {
            if ( event.which ) isMouseDown = false;
        }, true);


        $(document).ready(function(){
        canvas.cnv = document.getElementById("canvas");
        canvas.Width = canvas.cnv.width;
        canvas.Height = canvas.cnv.height;
        canvas.ctx = canvas.cnv.getContext('2d');
        });


        function mouseClick(e) {
            console.log(isMouseDown)
            if (isMouseDown){
            var x1 = event.offsetX;
            var y1 = event.offsetY;

            canvas.ctx.lineTo(x1, y1);
            canvas.ctx.stroke();
            }
        }
</script>

  </head>

</html>

Javascript子例程不运行

1 个答案: