是否可以使用Canvas而不是SVG运行Mike Bostock的Solar Terminator?

时间:2013-11-12 09:47:04

标签: canvas svg d3.js

我正在尝试使用说明性的正投影来运行Mike Bostock的太阳终结者(http://bl.ocks.org/mbostock/4597134#index.html)。 看起来像是o.k。

但是将这个SVG版本修改为Canvas-drawing我遇到了麻烦。 当我尝试正常的ctx.arc命令时,它将绘制一个正常的圆圈。它不会在地球上正确定位和投射圆圈。

我尝试了以下代码部分,但这只会显示没有着色效果的地球。

ctx.fillStyle = "rgba(70, 130, 180, 0.3)";  // night-style: steelblue and opacity
ctx.beginPath(),
  path(circle.origin(antipode(solarPosition(new Date)))),   
  ctx.fill();

是否有必要在circle-command中添加canvas上下文,如下面的代码部分所示:

var circle = d3.geo.circle()
  .context(ctx)         
  .angle(90);

但这还没有实现?

我感谢你的帮助

1 个答案:

答案 0 :(得分:1)

试试这个:

var circle = d3.geo.circle().angle(90);

ctx.fillStyle = "rgba(70, 130, 180, 0.3)";  // night-style: steelblue and opacity
ctx.beginPath(),
path(circle.origin(antipode(solarPosition(new Date)))()),   
ctx.fill();

(注意执行.origin方法的结果的额外parens)

这对我有用,没有任何其他变化。