2013-08-27 21 views
0

我想尝试基本的面料插件文件,当我复制代码并在屏幕上显示无法运行时。如何在脚本中包含fabric.js文件

<!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> 

这是我已复制的代码,但它没有任何显示。

编辑::

我解决了这个。我在弄错我没有在车身标签内创建元素。

+0

你把正确的路径为.js文件

0

脚本代码试试这个。

<!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> 
+0

不工作:(..是在你身边工作? – anam

3

加入canvs在主体元素解决了这个问题:)......

<!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 canvas = new fabric.Canvas('canvas'); 

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

</head> 

<body> 
    <div> 
    <header> 
     <h1>canvas</h1> 
    </header> 
    <canvas id="canvas" width="300" height="300"></canvas> 




</body> 
</html> 
相关问题