Javascript 为什么赢了'；我的画布不能使用Fabric.js显示任何内容吗？_Javascript_Html_Css_Canvas_Fabricjs

Javascript 为什么赢了'；我的画布不能使用Fabric.js显示任何内容吗？

javascript html css canvas

Javascript 为什么赢了'；我的画布不能使用Fabric.js显示任何内容吗？,javascript,html,css,canvas,fabricjs,Javascript,Html,Css,Canvas,Fabricjs,我复制了Fabricjs提供的代码，并将其放入名为Fabric.js的文件中。然后我创建了一个名为Canvas.js的文件。我已经将这两个文件导入到我的HTML文件中，并试图打印出一个矩形，但没有任何效果。我做错了什么 HTML: <!doctype html> <html lang="en";> <head> <meta charset="utf-8" /> <title>CustomCase</title>

我复制了Fabricjs提供的代码，并将其放入名为Fabric.js的文件中。然后我创建了一个名为Canvas.js的文件。我已经将这两个文件导入到我的HTML文件中，并试图打印出一个矩形，但没有任何效果。我做错了什么

HTML:

<!doctype html>
<html lang="en";>
<head>
    <meta charset="utf-8" />
    <title>CustomCase</title>
    <link rel="stylesheet" href="HeaderFooter.css">
    <link rel="stylesheet" href="SkapaDesign.css">
    <script src="Fabric.js"></script>
    <script src="Canvas.js"></script>
</head>
<body>  
    <div id="Wrapper">  
        <header id="Header"></header>

        <section id="Body">
            <div id="LeftColumn">   
                <canvas id="Canvas"></canvas>
            </div>
        </section>

        <footer id="Footer"></footer>   
    </div>
</body>
</html>

JavaScript:

$(document).ready(function(){
    var canvas = new fabric.Canvas('Canvas');

var rect = new fabric.Rect({
  top: 100,
  left: 100,
  width: 60,
  height: 70,
  fill: 'red'
});
canvas.add(rect);
});

因为您正在用以下内容包装代码：

$(document).ready(function(){});

您还需要在文件中包含该库

示例：

谢谢，我试试看

$(document).ready(function(){});