用位圖繪製一個圓圈數據

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);