用 bitmapData 画一个圆

Question

我的理解是最好使用 bitmapData 对象来添加您将使用物理引擎操作的图形。

所以，我一直在尝试使用 bitmapData 对象绘制圆圈。

我尝试了两种方法，但由于不同的原因都失败了。

1）我按照这个例子：http://phaser.io/exa...from-bitmapdata

在这里用圆替换矩形作为文档：http://phaser.io/doc...ta.html#circle:

var bmd = game.add.bitmapData(128,128);

// draw to the canvas context like normal
bmd.ctx.beginPath();
bmd.ctx.circle(0,0,128);
bmd.ctx.fillStyle = '#ff0000';
bmd.ctx.fill();

示例中演示的 rect 方法对我来说效果很好，但是当我将其更改为 circle 时，它​​会报错：undefined is not a function, on this line: bmd.ctx.circle(0,0,128 );

另外，这让我感到困惑，因为 circle 和 rect 都被列为位图数据的公共方法，而不是 ctx。

我也不明白bitmapData.context和bitmapData.ctx的区别

2) 我按照我在网上找到的一个示例进行了编码：

    bmd.ctx.fillStyle = '#999999';
    bmd.ctx.beginPath();
    bmd.ctx.arc(25, 25, 100, 0, 2*Math.PI, true); 
    bmd.ctx.fill();

这只会产生四分之一圆，尽管它被设置为一个完整圆的弧度。

Answer 1

1)

• BitmapData 创建一个画布对象。

• BitmapData.context 指的是该画布的 2dcontext。

  话虽如此：

• BitmapData.ctx is a reference of BitmapData.context

• Circle is a helper method provided by BitmapData。您收到“未定义”错误，因为您是从 BitmapData.ctx 而不是直接从 BitmapData 调用它。
• 你很困惑，因为画布对象本身has a .rect() method，
  而 bitmapData got one too 但略有不同。
  这就是为什么 bmd.ctx.rect() 有效但 bmd.ctx.circle() 无效的原因。

2) 您只看到四分之一的原因是因为您将 bitmapData 大小设置为太小 (128 x 128)，而无法让 Phaser 绘制。
您将圆心放置在 {x:25, y:25} 并以 100px 的半径进行绘制，从而超出空间。

降低半径，将中心放在你创建的bitmapData上下文的中心，你会看到正确的结果：

 bmd.ctx.arc(bmd.width / 2, bmd.height / 2, 50, 0, 2 * Math.PI, true);