Question

下面是简单的代码。当有人按下按钮时，它将绘制一个可以重新调整大小或重新缩放并可移动的图像下面的代码工作正常，但如果我将我的java脚本移动到我的head标签上的canvas标签上脚本下面src = https://ajax.googleapis ......
代码突然停止工作我很好奇是什么触发了这个事件以及如何解决它

CODE：

<head>
    <meta charset="utf-8">
    <title>fabric.js-simple text display</title>

    <!-- Get version 1.1.0 of Fabric.js from CDN -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.1.0/fabric.all.min.js" ></script>

    <!-- Get the highest 1.X version of jQuery from CDN. Required for ready() function. -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 

    <body>
        <!-- A canvas tag is required or 
             Fabric.js doesn't know where to draw. -->

        <canvas id="myCanvas" height=600 width=800></canvas>
        <input id="addStuff" type="button" value="Add!" />
    </body>

    <script>

        var canvas = new fabric.Canvas('myCanvas');
        var ctx = canvas.getContext("2d");

        $(function(){
            $('#addStuff').on('click', function(e) {

                fabric.Image.fromURL('http://i.imgur.com/a47Yxsb.png', function(oImg) {
                    oImg.scaleToWidth(90);
                    oImg.left=50;
                    oImg.top = 50;
                    canvas.add(oImg);
                });
            });
        });
    </script>
</head>


</html>

Answer 1

这是一个常见问题。

使用显示的代码，在页面加载时执行以下部分：

var canvas = new fabric.Canvas('myCanvas');
var ctx = canvas.getContext("2d");

当文档准备就绪时，执行这两行下面的jQuery代码（你的语法类似于$( document ).ready( handler )）。

问题是DOM是从上到下加载的，所以如果你将2个第一行放在文档的顶部，那么当它们被执行时，下面的HTML元素还不存在，这会导致引用myCanvas元素时出现Javascript错误，此时此元素不存在。

所以你可以在下面的jQuery“ready”函数中移动这两行，在这种情况下你可以把这个函数放在你想要的任何地方，即使在你的文档之上，因为它们不会在你之前执行整个DOM已加载。放置它的最佳位置是在一个单独的javascript文件中，并且上次我检查了包含那些.js文件的最佳位置是在身体的最底部。

Answer 2

这是因为你正在使用DOM。在工作的情况下，JS在body标签中的所有内容都已加载后运行，包括你想要添加处理程序的元素，所以一切正常。当你把它放在head标签中时，在执行代码时DOM没有加载，所以它失败了。

多次被这一个人抓住了，你也可以通过将所有js添加到$（document）.ready（）来避免这种情况，等待文档在运行之前准备就绪

$(document).ready(function() {
    var canvas = new fabric.Canvas('myCanvas');
    var ctx = canvas.getContext("2d");

    $('#addStuff').on('click', function(e) {
        ...
    }
});

Jquery脚本未正确加载

2 个答案: