有没有可能用Canvas代替SVG来运行Mike Bostock的Solar Terminator？

Question

我正在尝试使用说明性的正交投影运行Mike Bostock的太阳能终结器(http://bl.ocks.org/mbostock/4597134#index.html)。看起来没问题。

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

我尝试了下面的代码部分，但这将只显示没有阴影效果的地球。

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中添加画布上下文，如以下代码部分所示：

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

但是这还没有实现吗？

我感谢你的帮助

Answer 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方法结果的额外括号)

这对我来说很有效，没有任何其他改变。