Jquery 如何在脚本中包含fabric.js文件_Jquery_Html_Css_Fabricjs

Jquery 如何在脚本中包含fabric.js文件

jquery html css

Jquery 如何在脚本中包含fabric.js文件,jquery,html,css,fabricjs,Jquery,Html,Css,Fabricjs,我想试试基本的结构插件文件，当我复制代码并运行时，屏幕上什么也不显示 <!DOCTYPE html> <html lang="en"> <head> <script></script> <script src="js/jquery-1.9.1.js"></script> <script src="js/fabric.js"></script> <script>

我想试试基本的结构插件文件，当我复制代码并运行时，屏幕上什么也不显示

<!DOCTYPE html>
<html lang="en">
<head>
  <script></script>
    <script src="js/jquery-1.9.1.js"></script>
  <script src="js/fabric.js"></script>
  <script>
        $(document).ready(function(){
   var circle = new fabric.Circle({
  radius: 20, fill: 'green', left: 100, top: 100
});
var triangle = new fabric.Triangle({
  width: 20, height: 30, fill: 'blue', left: 50, top: 50
});

canvas.add(circle, triangle);
});
</script>

</head>

<body>
  <div>
    <header>
      <h1>canvas</h1>
    </header>





</body>
</html>


$（文档）.ready（函数（）{
var circle=新结构。circle({
半径：20，填充：“绿色”，左侧：100，顶部：100
});
var三角形=新结构。三角形({
宽度：20，高度：30，填充：“蓝色”，左侧：50，顶部：50
});
画布。添加（圆形、三角形）；
});
帆布

这是我复制的代码，但没有显示任何内容

编辑：：

我解决了这个问题。我犯了一个错误，我不想在body标签中创建元素。

将脚本代码包装到document ready函数中

$(document).ready(function(){
 //your code goes here
});

将脚本代码包装到document ready函数中

$(document).ready(function(){
 //your code goes here
});

试试这个

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="js/jquery-1.9.1.js" type="text/javascript"></script>
  <script src="js/fabric.js" type="text/javascript"></script>
  <script type="text/javascript">
      $(document).ready(function(){
     var circle = new fabric.Circle({
     radius: 20, fill: 'green', left: 100, top: 100
     });
     var triangle = new fabric.Triangle({
     width: 20, height: 30, fill: 'blue', left: 50, top: 50
     });
     canvas.add(circle, triangle);
      });
      </script>

    </head>
    <body>
      <div>
        <header>
          <h1>canvas</h1>
        </header>
    </body>
    </html>


$（文档）.ready（函数（）{
var circle=新结构。circle({
半径：20，填充：“绿色”，左侧：100，顶部：100
});
var三角形=新结构。三角形({
宽度：20，高度：30，填充：“蓝色”，左侧：50，顶部：50
});
画布。添加（圆形、三角形）；
});
帆布

试试这个

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="js/jquery-1.9.1.js" type="text/javascript"></script>
  <script src="js/fabric.js" type="text/javascript"></script>
  <script type="text/javascript">
      $(document).ready(function(){
     var circle = new fabric.Circle({
     radius: 20, fill: 'green', left: 100, top: 100
     });
     var triangle = new fabric.Triangle({
     width: 20, height: 30, fill: 'blue', left: 50, top: 50
     });
     canvas.add(circle, triangle);
      });
      </script>

    </head>
    <body>
      <div>
        <header>
          <h1>canvas</h1>
        </header>
    </body>
    </html>


$（文档）.ready（函数（）{
var circle=新结构。circle({
半径：20，填充：“绿色”，左侧：100，顶部：100
});
var三角形=新结构。三角形({
宽度：20，高度：30，填充：“蓝色”，左侧：50，顶部：50
});
画布。添加（圆形、三角形）；
});
帆布

在主体中添加canvs元素解决了问题：）


$（文档）.ready（函数（）{
var canvas=newfabric.canvas（'canvas'）；
var rect=new fabric.rect({
前100名，
左:100,，
宽度：60，
身高：70，
填充：“红色”
});
canvas.add（rect）；
});
帆布

在主体中添加canvs元素解决了问题：）


$（文档）.ready（函数（）{
var canvas=newfabric.canvas（'canvas'）；
var rect=new fabric.rect({
前100名，
左:100,，
宽度：60，
身高：70，
填充：“红色”
});
canvas.add（rect）；
});
帆布

是Simmi是正确的，您需要在页面中添加画布元素

    <canvas id="canvas" width="300" height="300"></canvas>

这是一个活生生的例子

是的，Simmi是正确的，您需要在页面中添加画布元素

    <canvas id="canvas" width="300" height="300"></canvas>

这是一个活生生的例子

您是否将.js文件的正确路径放在标记内？您是否将.js文件的正确路径放在标记内