Question

我刚刚开始使用fabric.js，我想绘制一个网格我发现了这个功能但是，我有错误：＆＃34;无法读取属性＆＃39; moveTo＆＃ 39;未定义的，我想我的范围不正确，也许我不确定...... 这是我的代码：

<html>
<head>
    <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
    <script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.2.0/fabric.all.min.js'></script>

</head>

<body>
   <canvas id="canvas" width="800" height="450" style="border:1px solid #000000"></canvas>


    <script>
        var canvas = new fabric.Canvas('canvas');
        canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));

        canvas.selectionColor = 'rgba(0,255,0,0.3)';
        canvas.selectionBorderColor = 'red';
        canvas.selectionLineWidth = 5;
        draw_grid(100);
//this is the function I found

function draw_grid(grid_size) {

  grid_size || (grid_size = 25);
  currentCanvasWidth = canvas.getWidth();
  currentcanvasHeight = canvas.getHeight();

  // Drawing vertical lines
  var x=0;
  for (x = 0; x <= currentCanvasWidth; x += grid_size) {
      this.grid_context.moveTo(x + 0.5, 0);
      this.grid_context.lineTo(x + 0.5, currentCanvasHeight);
  }

  // Drawing horizontal lines
      var y;
      for (y = 0; y <= currentCanvasHeight; y += grid_size) {
      this.grid_context.moveTo(0, y + 0.5);
      this.grid_context.lineTo(currentCanvasWidth, y + 0.5);
  }

  grid_size = grid_size;
  this.grid_context.strokeStyle = "black";
  this.grid_context.stroke();
}

</script>
</body>
</html>

Answer 1

您需要context这样var context = canvas.getContext("2d");，currentcanvasHeight中的拼写错误应该是currentCanvasHeight，因为您在下方使用它。无论如何这里是工作代码

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

canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
canvas.selectionColor = 'rgba(0,255,0,0.3)';
canvas.selectionBorderColor = 'red';
canvas.selectionLineWidth = 5;
draw_grid(100);

function draw_grid(grid_size) {
    var context = canvas.getContext("2d");
    grid_size || (grid_size = 25);
    var currentCanvasWidth = canvas.getWidth();
    var currentCanvasHeight = canvas.getHeight();

    // Drawing vertical lines
    var x=0;
    for (x = 0; x <= currentCanvasWidth; x += grid_size) {
        context.moveTo(x + 0.5, 0);
        context.lineTo(x + 0.5, currentCanvasHeight);
    }

    // Drawing horizontal lines
    var y;
    for (y = 0; y <= currentCanvasHeight; y += grid_size) {
        context.moveTo(0, y + 0.5);
        context.lineTo(currentCanvasWidth, y + 0.5);
    }

    grid_size = grid_size;
    context.strokeStyle = "black";
    context.stroke();
}

<强> FIDDLE

Fabric.js Draw_grid无法读取属性＆＃39; moveTo＆＃39;未定义的

1 个答案: