javascript - 在javascript中生成透明圆圈（客户端）

Question

我正在实施例程以在 Google 地图 api 中为标记显示不同大小的图标，如本页所示： https ://developers.google.com/academy/apis/maps/visualizing/earthquakes （查看圆圈示例):

window.eqfeed_callback = function(results) {
  for (var i = 0; i < results.features.length; i++) {
    var earthquake = results.features[i];
    var coords = earthquake.geometry.coordinates;
    var latLng = new google.maps.LatLng(coords[1],coords[0]);
    var marker = new google.maps.Marker({
      position: latLng,
      map: map,
      icon: getCircle(earthquake.properties.mag)
    });
  }
}

function getCircle(magnitude) {
  return {
    path: google.maps.SymbolPath.CIRCLE,
    fillColor: 'red',
    fillOpacity: .2,
    scale: Math.pow(2, magnitude) / Math.PI,
    strokeColor: 'white',
    strokeWeight: .5
  };
}

在 chrome 中一切正常，但是当我在 IE9 中执行此操作时，它对于许多标记来说非常缓慢。它必须在 IE9 中，因为我在我的应用程序中自动化 IE9）。那是因为 IE9 在 SVG 上运行速度很慢。所以我正在尝试一种不同的方法，使用图标而不是 SVG 生成的圆圈。为此，我需要使用 JS（我的项目中没有服务器代码）即时生成它们，然后将圆圈保存到磁盘并将它们分配给标记。

如何仅使用 JS 生成圆圈并将其保存为透明 PNG？