Question

HY 我对画布非常陌生，我试图学习如何使用fabricjs，但我甚至无法使用最基本的例子来工作，而且非常令人沮丧。我下载了fabricjs-1.4.8.zip文件，我使用的唯一文件是dist / fabric.min.js，这是我的HTML代码

<html>
  <head>
    <script type="text/javascript" src="jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="fabric.js-1.4.8/dist/fabric.js"></script>
    <script tye="text/javascript" src="test.js"></script>
  </head>
  <body>
    <canvas id="myCanvas" width="200" height="100"
     style="border:1px solid #000000;">
    </canvas>
  </body>
</html>

首先，我没有包含jquery，但看到很多例子后看起来可以做到这一点，但它对我来说没有，也许我包含了错误的版本？这是我的test.js文件

  var canvas = new fabric.Canvas('myCanvas');

  // create a rectangle with angle=45
  var rect = new fabric.Rect({
    left: 100,
    top: 100,
    fill: 'red',
    width: 20,
    height: 20,
    angle: 45
  });
  canvas.add(rect);

我可以选择画布元素的边框，但内部没有矩形。有人能看出我做错了什么吗？感谢

Answer 1

看起来你的画布是200 x 100.但是你试图从顶部绘制一个100像素的矩形。您的代码可能有效，但矩形不会显示，因为它是在画布的底部绘制的。尝试更改此行

top: 100

到此：

top: 0

<强>更新

如果这首先不起作用，可能是因为在脚本运行之前没有加载DOM。您可以将代码放在jQuery文档就绪监听器中，如下所示：

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

这将确保在脚本触发时实际准备好使用canvas元素。祝你好运！

如何使用fabricjs

1 个答案: