用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方法对我来说很好，但是当我将其更改为圆形时，它会产生错误：undefined不是函数，在这一行：bmd.ctx.circle（0,0,128） ）;

另外，这让我感到困惑，因为，circle和rect都被列为bitmapdata的公共方法，而不是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）您只看到四分之一的原因是因为您为要求Phaser绘制的圆设置了bitmapData太小（128 x 128）。
您将圆心放置在{x：25，y：25}并以100px半径绘制，从而缩小空间。

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

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