如何导入外部JavaScript库_Javascript_Html_Canvas_Import

如何导入外部JavaScript库

javascript html canvas import

如何导入外部JavaScript库,javascript,html,canvas,import,Javascript,Html,Canvas,Import,这将是我的第二个HTML/CSS和Javascript项目，所以我是一个初学者。我试图允许用户在画布上绘制一些形状/线条，然后使用名为curve matcher的外部库将预定形状与用户绘制的形状进行比较我首先在一个名为index.HTML的HTML文件中创建了一个用户可以绘制的画布。我有一个按钮清除画布，另一个按钮调用外部函数，然后显示相似性分数。这很好，代码如下 <html> <script type="text/javascript">

这将是我的第二个HTML/CSS和Javascript项目，所以我是一个初学者。我试图允许用户在画布上绘制一些形状/线条，然后使用名为curve matcher的外部库将预定形状与用户绘制的形状进行比较

我首先在一个名为index.HTML的HTML文件中创建了一个用户可以绘制的画布。我有一个按钮清除画布，另一个按钮调用外部函数，然后显示相似性分数。这很好，代码如下

<html>
    <script type="text/javascript">
    var canvas, ctx, flag = false, prevX = 0, currX = 0, prevY = 0, currY = 0, dot_flag = false, coordinates = [];

    function init() {
        canvas = document.getElementById('can');
        canvas.style.backgroundColor = "#fffcf5";
        ctx = canvas.getContext("2d");
        w = canvas.width;
        h = canvas.height;

        canvas.addEventListener("mousemove", function (e) {
            findxy('move', e)
        }, false);
        canvas.addEventListener("mousedown", function (e) {
            findxy('down', e)
        }, false);
        canvas.addEventListener("mouseup", function (e) {
            findxy('up', e)
        }, false);
        canvas.addEventListener("mouseout", function (e) {
            findxy('out', e)
        }, false);
    }

    function draw() {
        ctx.beginPath();
        ctx.moveTo(prevX, prevY);
        ctx.lineTo(currX, currY);
        coordinates.push({x:prevX, y: prevY});
        ctx.strokeStyle = "black";
        ctx.lineWidth = 4;
        ctx.stroke();
        ctx.closePath();
    }

    function erase() {
        var m = confirm("Want to clear");
        alert(coordinates);
        if (m) {
            ctx.clearRect(0, 0, w, h);
            document.getElementById("canvasimg").style.display = "none";
        }
        coordinates = [];
        alert(coordinates);
    }

    function findxy(res, e) {
        if (res == 'down') {
            prevX = currX;
            prevY = currY;
            currX = e.clientX - canvas.offsetLeft;
            currY = e.clientY - canvas.offsetTop;

            flag = true;
            dot_flag = true;
            if (dot_flag) {
                ctx.beginPath();
                ctx.fillStyle = x;
                ctx.fillRect(currX, currY, 2, 2);
                ctx.closePath();
                dot_flag = false;
            }
        }
        if (res == 'up' || res == "out") {
            flag = false;
        }
        if (res == 'move') {
            if (flag) {
                prevX = currX;
                prevY = currY;
                currX = e.clientX - canvas.offsetLeft;
                currY = e.clientY - canvas.offsetTop;
                draw();
            }
        }
    }

    function similarity(){
        alert('stop');
        // const rectangle = [{x: 1, y: 1}, {x: 2, y: 2}, {x: 3, y: 1}, {x: 4, y: 2}]
        // const cuphandle = [{x: 1, y: 6}, {x: 2, y: 3}, {x: 3, y: 2}, {x: 4, y: 1}, {x: 5, y: 1}, {x: 6, y: 1}, {x: 7, y: 2}, {x: 8, y: 3}, {x: 9, y: 6}]
        // const similarity = shapeSimilarity(rectangle, cuphandle);
        // alert
    }
    </script>
    <body onload="init()">
        <canvas id="can" width="600" height="600" style="position:absolute;top:10%;left:10%;border:2px solid;"></canvas>
        <input type="button" value="Clear" id="clr" onclick="erase()">
        <input type="button" value="similarity" id="fn" onclick="similarity()">
    </body>
</html>

但是，当我尝试将HTML文件中的所有Javascript放入help.js时，不仅画布没有绘制，而且similarity（）函数也没有按预期工作。这就是我如何“更改”我的文件，但本质上只是从HTML文件复制并粘贴到JavaScript文件。代码如下

index.html文件：

<html>
    <body onload="init()">
        <canvas id="can" width="600" height="600" style="position:absolute;top:10%;left:10%;border:2px solid;"></canvas>
        <input type="button" value="Clear" id="clr" onclick="erase()">
        <input type="button" value="Similarity" id="fn" onclick="similarity()">
    </body>
</html>

import { shapeSimilarity } from 'curve-matcher';
var canvas, ctx, flag = false, prevX = 0, currX = 0, prevY = 0, currY = 0, dot_flag = false, coordinates = [];
const init = () => {
    alert('does not initiate');
    canvas = document.getElementById('can');
    canvas.style.backgroundColor = "#fffcf5";
    ctx = canvas.getContext("2d");
    w = canvas.width;
    h = canvas.height;

    canvas.addEventListener("mousemove", function (e) {
        findxy('move', e)
    }, false);
    canvas.addEventListener("mousedown", function (e) {
        findxy('down', e)
    }, false);
    canvas.addEventListener("mouseup", function (e) {
        findxy('up', e)
    }, false);
    canvas.addEventListener("mouseout", function (e) {
        findxy('out', e)
    }, false);
}

const draw = () => {
    ctx.beginPath();
    ctx.moveTo(prevX, prevY);
    ctx.lineTo(currX, currY);
    coordinates.push({x:prevX, y: prevY});
    ctx.strokeStyle = "black";
    ctx.lineWidth = 4;
    ctx.stroke();
    ctx.closePath();
}

const erase = () => {
    alert("??")
    var m = confirm("Want to clear");
    if (m) {
        ctx.clearRect(0, 0, w, h);
        document.getElementById("canvasimg").style.display = "none";
    }
    coordinates = [];
    alert(coordinates);
}

const findxy = (res, e) => {
    if (res == 'down') {
        prevX = currX;
        prevY = currY;
        currX = e.clientX - canvas.offsetLeft;
        currY = e.clientY - canvas.offsetTop;

        flag = true;
        dot_flag = true;
        if (dot_flag) {
            ctx.beginPath();
            ctx.fillStyle = x;
            ctx.fillRect(currX, currY, 2, 2);
            ctx.closePath();
            dot_flag = false;
        }
    }
    if (res == 'up' || res == "out") {
        flag = false;
    }
    if (res == 'move') {
        if (flag) {
            prevX = currX;
            prevY = currY;
            currX = e.clientX - canvas.offsetLeft;
            currY = e.clientY - canvas.offsetTop;
            draw();
        }
    }
}

const similarity = () => {
    alert('hi');
    const rectangle = [{x: 1, y: 1}, {x: 2, y: 2}, {x: 3, y: 1}, {x: 4, y: 2}]
    const cuphandle = [{x: 1, y: 6}, {x: 2, y: 3}, {x: 3, y: 2}, {x: 4, y: 1}, {x: 5, y: 1}, {x: 6, y: 1}, {x: 7, y: 2}, {x: 8, y: 3}, {x: 9, y: 6}]
    const similarity = shapeSimilarity(rectangle, cuphandle);
}

关于如何让这两个文件单独工作，但同时工作，有什么想法吗？

只需在现有脚本标记上方添加

现在，help.js中的所有方法都将可用。通常不建议这样做，您应该阅读有关es6导出和模块模式的内容。

之所以没有任何功能，是因为主体在onload中调用了函数“init”，但该函数仅在help.js文件中定义，而主html文件中从未引用过该函数，因此导致了一个错误，即使html中有其他脚本，也可能会导致问题，尤其是现在所有JavaScript都在另一个文件中

基本上只是添加一个脚本引用

<html>
    <body onload="init()">
         <script type="module" src="help.js"></script>
        <canvas id="can" width="600" height="600" style="position:absolute;top:10%;left:10%;border:2px solid;"></canvas>
        <input type="button" value="Clear" id="clr" onclick="erase()">
        <input type="button" value="Similarity" id="fn" onclick="similarity()">
    </body>
</html>

但是在help.js函数本身中，还要确保“curve matcher”中存在函数“ShapeSimility”，其次还要确保curve matcher甚至是一个与其他文件位于同一目录中的.jsm文件，在导入之前，您可能需要先从internet下载它，在浏览器中按F12键检查控制台，查看是否存在任何导入错误

您需要使用带有src属性的脚本标记在html中查看help.js文件，如下图所示

要使用来自其他网站的外部文件，您可以使用

我一直都是这样做的，我没有遇到任何其他我认为更简单的方法。

在

init

函数中，您正在重新定义

canvas

和

ctx

。这意味着它们在

init

的范围之外将不可用。很好，我没有看到！但是，即使我删除了init内部变量的声明并将声明保留在外部，它仍然不会显示。您的脚本是否包含在HTML中，脚本标记是否具有

type=“module”

属性？是的，我按照@bluejayke所说的，在

的正下方添加了

，正如您所说，它仍然没有在画布上画任何东西。另外，如何检查曲线匹配器中是否存在shapeSimilarity（）？我认为help.js开头的

从“curve matcher”

行导入{ShapeSimility}就足以验证该函数是否存在了？curve matcher库中充满了.js.map文件，这就是.jsm的意思吗？它们与我的HTML和.js文件位于不同的目录中，它们位于node_modules文件夹中。@beepboop ok nodes_模块通常用于服务器端模块，以便与node js一起使用，如果要在浏览器中使用它们，则必须使用browserfy等工具进行编译。在猜测中，您看到有人使用require（“曲线匹配器”），然后认为您对import也使用require，我错了吗？Fire您是否下载了节点模块文件夹，是否使用了npm？现在只需在不导入的情况下尝试，然后创建一个新的.jsm文件进行测试，在文件中键入一个新函数或变量，然后

导出varName

，如果它们是您创建的，那么在其他文件中`从“something.jsm”导入var name是的，我使用了npm安装曲线匹配器。我想使用的similarity（）函数有很多依赖项，例如来自同一库中另一个文件的函数。如果我在另一个文件中重写相似性函数，然后导出然后导入，这就足够了吗？@beepbeepboop-ya这就足够了，从技术上讲，你不需要导出和导入，你只需要创建一个新文件，如果你想包含所有的文件，但是，不管你实际导出什么，你都可以从那个特定的文件导入（通常以.jsm或.js结尾），但不是package.json中显示的模块babe，通常只适用于nodejs，或者您可以使用browserfy自动执行此操作

允许绘制画布，但相似性函数（）受影响，在尝试导入时无法工作。因此感觉好像我被迫在type='text/javascript'或type='module'之间进行选择？这不允许在相似度（）中为我的外部库导入语句函数不起作用，因为我在开头的import语句会导致错误。添加该语句可以绘制，但不允许使用库中的similarity（）函数，因为顶部的import语句会导致错误。

<html>
    <body onload="init()">
         <script type="module" src="help.js"></script>
        <canvas id="can" width="600" height="600" style="position:absolute;top:10%;left:10%;border:2px solid;"></canvas>
        <input type="button" value="Clear" id="clr" onclick="erase()">
        <input type="button" value="Similarity" id="fn" onclick="similarity()">
    </body>
</html>