通过 Fabric JS 在 Wordpress 中的画布上添加基本的红色方块

Question

我已经使用 Bootstrap 创建了一个 Wordpress 主题，并且一直在尝试将教程中的基本红色方块加载到我的 html 中的画布上。

    // create a wrapper around native canvas element (with id="c")
var canvas = new fabric.Canvas('c');

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

// "add" rectangle onto canvas
canvas.add(rect);

• 脚本已加载，当我控制台记录画布对象时，它会输出画布对象及其属性。但是，画布上不会出现任何内容。我已经确保我的 id 匹配并且我的画布在一个包装器之间并且有 1000 / 1000 px 的空间集，它是居中的。

• 下面是我的模板代码

   <div class="container">
      <div class="row">
          <div class="col-lg-12">
              <h1 class="test-header">Test Your Ad Here!</h1>
          </div>
      </div>
   </div>
  
   <div>
      <canvas id="c" width="1000" height="1000"> </canvas>
   </div>
  
   <hr/>
  <?php get_footer(); ?>
  

谢谢！

Answer 1

不知道为什么它不渲染，但可以尝试调用canvas.renderAll() 以确保 fanric 知道是时候将其数据渲染到画布了。