Question

我想尝试基本的光纤插件文件，当我复制代码并且屏幕上不显示任何内容时。

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

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

修改::

我解决了这个问题。我错了，我不想在身体标签内部创建元素。

Answer 1

在体内添加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>

Answer 2

是的，Simmi是对的，你需要在页面中添加Canvas元素。

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

这是实例。 http://jsfiddle.net/swapnilvathare/hxjZa/

Answer 3

将脚本代码包装在文档就绪函数

中

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

Answer 4

试试这个。

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

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

4 个答案: