我复制了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>
CSS:
#Body{
height: 675px;
}
#LeftColumn{
float: left;
width: 355px;
margin-top: 20px;
}
#Canvas{
float: left;
margin-left: 15px;
overflow: hidden;
}
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);
});