Question

fabric js 画布初始化错误

2015-12-02

1711

javascript jquery canvas fabricjs

我用画布创建了我的第一个 js 应用程序，但它不起作用。代码是从 http://fabricjs.com/ 复制的，并包装在 jQuery 中。

fab.js

var $ = jQuery;
$(document).ready(function(){
    var canvas = new fabric.Canvas('c');

    var rect = new fabric.Rect({
      left: 100,
      top: 100,
      fill: 'red',
      width: 20,
      height: 20,
      angle: 45
    });

    canvas.add(rect);
});

html

<html>
    <head>
        <title>Fabric.js</title>
        <script src="jquery-1.11.3.min.js"></script>
        <script src="jquery-ui.min.js"></script>
        <script src="canvasjs.min.js"></script>
        <script src="fabric.min.js"></script>
        <script src="fab.js"></script>
    </head>
    <body>
        <div id="c">

        </div>
    </body>
</html>

Uncaught Error: Could not initialize canvas element

出了什么问题？

Answer 1

我得出了解决方案：只需将 div 属性替换为 canvas ！

<html>
    <head>
        <title>Fabric.js</title>
        <script src="jquery-1.11.3.min.js"></script>
        <script src="jquery-ui.min.js"></script>
        <script src="canvasjs.min.js"></script>
        <script src="fabric.min.js"></script>
        <script src="fab.js"></script>
    </head>
    <body>
        <canvas id="c">

        </canvas>
    </body>
</html>

现在就可以正常工作了。