个人中心
gpt4 book ai didi

Javascript 子例程不运行

转载 作者：行者123 更新时间：2023-11-30 20:39:27 25 4
gpt4 key购买 nike

所以我是 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>

最佳答案

您的初始化和 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');

这是一个如何使用 Canvas 的简单示例:

<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 子例程不运行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49456837/

25 4 0
文章推荐： javascript - reactjs中的文本框无法输入文本
文章推荐： c# - 如何从以下字节中提取日期时间？
文章推荐： JavaScript 捕获 onfocus 事件
文章推荐： c# - wpf - 如何控制用户控件鼠标悬停时的可见性？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com