首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >用bitmapData绘制圆

用bitmapData绘制圆
EN

Stack Overflow用户
提问于 2015-04-01 04:10:51
回答 1查看 1.9K关注 0票数 1

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

所以,我一直试图用bitmapData对象来画圆圈。

我尝试过两种方法,它们由于不同的原因都失败了。

1)我遵循了这个例子:http://phaser.io/exa...from-bitmapdata

用圆圈代替rect作为文档:http://phaser.io/doc...ta.html#circle

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

代码语言:javascript
运行
复制
// draw to the canvas context like normal
bmd.ctx.beginPath();
bmd.ctx.circle(0,0,128);
bmd.ctx.fillStyle = '#ff0000';
bmd.ctx.fill();

示例中演示的rect方法对我来说很好,但是当我将它改为循环时,它会出现一个错误:未定义不是一个函数,在这一行上: bmd.ctx.circle(0,0,128);

而且,这让我感到困惑,因为,循环和rect都被列为比特映射数据的公共方法,而不是ctx方法。

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

2)我在网上找到了一个示例,对此进行了编码:

代码语言:javascript
运行
复制
    bmd.ctx.fillStyle = '#999999';
    bmd.ctx.beginPath();
    bmd.ctx.arc(25, 25, 100, 0, 2*Math.PI, true); 
    bmd.ctx.fill();

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

EN

回答 1

Stack Overflow用户

发布于 2015-04-07 18:25:14

1)

  • BitmapData创建一个画布对象。
  • BitmapData.context指的是该画布的2d上下文。 上面写着:
  • BitmapData.ctx是BitmapData.context的参考
  • 圆是BitmapData提供的辅助方法。。您得到一个“未定义”错误,因为您是从BitmapData.ctx而不是直接从BitmapData调用它。
  • 你很困惑,因为画布对象本身就是有一个.rect()方法, 而bitmapData 也有一个则略有不同。 这就是为什么bmd.ctx.rect()可以工作,但是bmd.ctx.circle()不能工作。

2)您只看到四分之一的原因是您将bitmapData大小设置得太小(128x128),不适合您要求Phaser绘制的圆圈。

你把圆心放置在{x:25,y:25},并画一个100 at半径,从而走出空间。

降低半径,将中心放置在所创建的bitmapData上下文的中心,您将看到正确的结果:

代码语言:javascript
运行
复制
 bmd.ctx.arc(bmd.width / 2, bmd.height / 2, 50, 0, 2 * Math.PI, true); 
票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/29382710

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档