如何在 HTML 中链接 JavaScript 框架/扩展？答案

【问题标题】：How to link JavaScript frameworks/extensions in HTML?如何在 HTML 中链接 JavaScript 框架/扩展？
【发布时间】：2014-07-03 15:51:45
【问题描述】：

我最近看到了很多框架和扩展，并且都用于很多不同的事情。我很难只使用原始 JavaScript 或原始 jQuery 来做事。我想使用这些 JS 扩展/框架，但问题是我不知道如何将它们链接到我的 HTML 文档。

例如：<script src="some link of fw/ext" type="text/javascript"></script> 我把它放在我的 HTML 的 <head> 中，然后将我的代码写入另一个名为“script.js”的文件（使用记事本制作），但代码似乎不起作用。

我知道这是一个问题，因为我没有正确链接它。

我想与fabric.js 合作开展一个与 HTML5 画布相关的项目。我想我需要以某种方式链接我的代码和框架，但我不确定我应该怎么做。

我的 HTML 代码：

<!DOCTYPE html>
<html>
<head>
<title>Code Example</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<script type="text/javscript" src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js"></script>
</head>
<body>
 <canvas id="draw" width="250px" height="250px">This if browser doesn't support HTML5
 </canvas>
</body>
</html>

我的 JS 代码：

var canvas = new fabric.Canvas('draw');
canvas.isDrawingMode = true;
canvas.freeDrawingBrush.width = 100;
canvas.freeDrawingBrush.color = "#ff0000";

应该有点像这样工作：http://jsfiddle.net/MartinThoma/B525t/5/

【问题讨论】：

您可能希望展示更多代码。没有任何代码是不可能帮你解决这个问题的。
我添加了必要的编辑。请帮忙。谢谢。
你把你的 JS 代码放在你的例子中的什么地方？
我在桌面上的记事本中将它做成了一个文件 script.js，所有文件类型都不是文本

标签： javascript css html fabricjs

【解决方案1】：

你需要先在头部加载fabric.js，然后你需要加载你的js文件顺序很重要。

<script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js'></script> 

<script type='text/javascript' src='yourjsfile.js'></script

如果您不清楚如何向画布添加元素。那么这里有一个可以帮助你的 sn-p。

还将您的代码包装在 onload() 函数中，以便在脚本加载时，#draw 元素可用

window.onload = function() {

    var canvas = new fabric.Canvas('draw');
        canvas.isDrawingMode = true;
        canvas.freeDrawingBrush.width = 5;
        canvas.freeDrawingBrush.color = "#ff0000";

    // create a rectangle object
    var rect = new fabric.Rect({
      left: 100,
      top: 100,
      fill: 'red',
      width: 20,
      height: 20
    });
    // you need to add the object to canvas
    canvas.add(rect);

}

【讨论】：