用位图绘制一个圆圈数据

Question

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

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

我试过两种方法，都因不同原因失败。

1）I，接着这个例子：http://phaser.io/exa...from-bitmapdata

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

变种BMD = game.add.bitmapData（128128）;

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

在本例中表现出的矩形方法，工作正常，我，但是当我将其更改为圆形，因为我有它上面给出了一个错误：undefined是不是一个函数，在这条线：bmd.ctx.circle （0,0,128）;

此外，这使我感到困惑，因为，是否圆和矩形都列为位图数据的公共方法，而不是ctx。

我也想不明白

2）我这个编码和bitmapData.context bitmapData.ctx的区别以下一个例子，我在网上找到：

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半径进行绘制，从而导致空间不足。

下半径，将在您创建的位图数据的上下文的中心的中心，你会看到正确的结果：

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