0

我想尝试基本的织物插件文件，当我复制代码并运行时，屏幕上没有显示任何内容。

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

这是我复制的代码，但它什么也没显示。

编辑：：

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

4

4 回答 4

4

在正文中添加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>
于 2013-08-27T06:50:42.717 回答
1

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

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

这是活生生的例子。http://jsfiddle.net/swapnilvathare/hxjZa/

于 2013-08-27T07:18:24.357 回答
0

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

$(document).ready(function(){
 //your code goes here
});
于 2013-08-27T06:31:48.273 回答
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>
于 2013-08-27T06:37:37.093 回答