Fatal编程技术网

Javascript子例程不'；跑不动

javascript

Javascript子例程不'；跑不动,javascript,Javascript,所以我是javascript新手，也是一个初学者。我知道初始化子程序总是先执行。我不明白为什么子程序没有运行。我想知道初始化子程序中的任何变量是否可以用于其他子程序。我正在尝试使用Bresenham线算法制作一个程序 > 初始化（）； drawGrid（）； 鼠标点击（）； //初始化-------------------------------- //初始化-------------------------------- 函数初始化（）{ var cnv=document.getEleme

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


>
初始化（）；
drawGrid（）；
鼠标点击（）；
//初始化--------------------------------
//初始化--------------------------------
函数初始化（）{
var cnv=document.getElementById（“画布”）；
var宽度=cnv宽度；
var高度=cnv高度；
var ctx=cnv.getContext（'2d'）；
var click_counter=0；//在存储第一和第二点坐标之间切换
p1x=0；//存储用户在画布上的单击
p1y=0；//存储用户在画布上的单击
p2x=0；//存储用户在画布上的单击
p2y=0；//存储用户在画布上的单击
}
//初始化--------------------------------
//网格---------------------------------
函数drawGrid（）{
变量网格线={
线路：{
空间：10，
//颜色：“#xxxxxx”
}
};
drawGridLines（cnv，gridLines.Lines）；
返回；
}
函数drawGridLines（cnv、lineOptions）{
ctx.strokeStyle=lineOptions.color；
ctx.strokeWidth=1；
ctx.beginPath（）；
var计数器=null；
var i=null；
var x=null；
var y=null；
计数器=数学地板（宽度/线条选项.空间）；

对于（i=1；i您的初始化和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>




>
画布={}
var isMouseDown=错误；
document.addEventListener（'mousedown'，函数（事件）{
如果（event.which）isMouseDown=true；
}，对）；
document.addEventListener（'mouseup'，函数（事件）{
如果（event.which）isMouseDown=false；
}，对）；
$（文档）.ready（函数（）{
canvas.cnv=document.getElementById（“canvas”）；
canvas.Width=canvas.cnv.Width；
canvas.Height=canvas.cnv.Height；
canvas.ctx=canvas.cnv.getContext（'2d'）；
});
功能鼠标单击（e）{
console.log（isMouseDown）
如果（isMouseDown）{
var x1=事件偏移量x；
var y1=event.offsetY；
canvas.ctx.lineTo（x1，y1）；
canvas.ctx.stroke（）；
}
}

可能是因为您遇到的语法错误？首先尝试修复它。是的，至少我看到结尾缺少了一个右括号——我想可能还有更多的问题。可能尝试使用linter。任何免费IDE，我都可以用来检查语法错误？所以我添加了document ready函数。我在主体括号a中声明canvast最上面。我应该在脚本括号中声明画布吗？
code
code.jquery.com/jquery-3.3.1.min.js“>$（document）.ready（function（）{initialization（）；drawGrid（）；mouseClick（）；}）
code
No您声明的画布是一个html对象。它只能通过诸如canvas.cnv=document.getElementById（“画布”）之类的dom查询访问。我认为您想要的是在画布加载到屏幕后检索其属性。因此，最好的实现是使用全局对象。我在初始化子例程中声明了
code
var cnv=document.getElementById（“画布”）；
code
。这与canvas.cnv=document.getElementById（“canvas”）；？是的，因为如果您注意到我在函数外部声明了“canvas”。因此，所有函数都可以访问该对象。其中，一旦退出初始化函数，您的cnv将丢失（以及宽度、高度和ctx）。因此，任何函数都可以访问document ready函数中的所有变量。drawGrid函数应该运行，然后退出。鼠标事件持续运行。我逐行查看了代码，看起来不错，但我知道我做错了什么。我不确定哪里出了错，也不知道如何调试它