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

【问题标题】：Is it possible to run Mike Bostock’s Solar Terminator with Canvas instead of SVG?是否可以使用 Canvas 而不是 SVG 运行 Mike Bostock 的 Solar Terminator？
【发布时间】：2013-11-24 09:37:20
【问题描述】：

我正在尝试使用说明性正交投影运行 Mike Bostock 的 Solar Terminator (http://bl.ocks.org/mbostock/4597134#index.html)。看起来不错。

但是将这个 SVG 版本修改为 Canvas 绘图我遇到了麻烦。当我尝试正常的 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);

但这还没有实现？

谢谢你的帮助

【问题讨论】：

标签： canvas svg d3.js

【解决方案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 方法的结果）

这对我有用，没有任何其他更改。

【讨论】：