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

How to link JavaScript frameworks/extensions in HTML?

本文关键字：JavaScript 框架 扩展 链接 HTML      更新时间：2023-09-26

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

例如:<script src="some link of fw/ext" type="text/javascript"></script>我把这个在我的HTML的<head>，然后写我的代码在一个不同的文件名为"script.js"(使用记事本)，但代码似乎不工作。

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

我想在一个与HTML5画布相关的项目上使用fabric.js。我想我需要链接两者，我的代码和框架在某种程度上，但我不确定我应该怎么做。

我的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>

My JS Code: 

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

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

你需要先在头部加载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

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

还要将代码封装在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);
}
相关文章：