Question

我是fabric.js的新手。我正在尝试这个页面中的简单示例。 “自定义背景图片” http://fabricjs.com/customization/

当我将其编码为内部Javascript时，它正常工作。但是当我尝试使用外部JavaScript使用相同的代码时。它说。

未捕获的TypeError：无法读取未定义的属性“推送”

HTML文件

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

    <link href="style.css" rel="stylesheet" type="text/css" />

    <script src="fabric.js"></script>
    <script src="design.js"></script>


</head>

<body>
    <div id="canvas_div">
    <canvas id="c" width="300" height="300">
    </canvas>
    </div>

     <script>

        /*var canvas = new fabric.Canvas('c');
        canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
        canvas.setOverlayImage('bg.png', canvas.renderAll.bind(canvas));
        this.__canvases.push(canvas);*/

    </script>

</body>
</html>

的JavaScript

    var canvas = new fabric.Canvas('c');
    canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
    canvas.setOverlayImage('bg.png', canvas.renderAll.bind(canvas));
    this.__canvases.push(canvas);

Answer 1

this.__canvases表示fabricjs的演示，因此您应在此行中添加注释。 ` var canvas = new fabric.Canvas（'canvas'）

  canvas.add(new fabric.Rect({ fill: '#f55', top: 100, left: 100, width:100, height: 100 }));
  canvas.setBackgroundImage(this.imgSrc, canvas.renderAll.bind(canvas))
  // this.__canvases.push(canvas)

`

尝试使用外部javaScript调用时，fabric.js push（）无效

1 个答案: