javascript - 在 Canvas 上绘制 SVG

Question

我有一组坐标，对于每一对，我想在 Canvas 上放置一个 SVG。问题出在getCircle功能。 SVG 不起作用，但如果我画一个圆圈(参见注释代码)它就起作用。

function getCircle() {
  var circle = document.createElement("canvas"),
      ctx = circle.getContext("2d"),      
      r2 = radius + blur;

  circle.width = circle.height = r2 * 2;

/*
  ctx.shadowOffsetX = ctx.shadowOffsetY = r2 * 2;
  ctx.shadowBlur = blur;
  ctx.shadowColor = "purple";

  ctx.beginPath();
  ctx.arc(-r2, -r2, radius, 0, Math.PI * 2, true);
  ctx.closePath();
  ctx.fill(); 
*/
  
  var img = new Image();
  img.onload = function() {
    ctx.drawImage(img, 0, 0);
  };
  img.src = "https://upload.wikimedia.org/wikipedia/en/0/09/Circle_Logo.svg";
  
  return circle;
}

var radius = 5;
var blur = 1;
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
canvas.width = 400;
canvas.height = 200;
var circle = getCircle();
ctx.clearRect(0, 0, canvas.width, canvas.height);

var data = [[38,20,2]];

for (var i = 0, len = data.length, p; i < len; i++) {
  p = data[i];
  ctx.drawImage(circle, p[0] - radius, p[1] - radius);
}

#c { 
  width: 400px;
  height: 200px;
}

<canvas id="c"></canvas>

Answer 1

var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
canvas.width = 400;
canvas.height = 200;
var data = [[0,20,2],[125,20,2],[250,20,2]];
drawImage();

function drawImage() {
  var img = new Image();
  img.onload = function() {
    for (var i = 0, len = data.length, p; i < len; i++) {
       p = data[i];
       ctx.drawImage(this, p[0] , p[1] , 150, 150);
     }
  };
  img.src = "https://upload.wikimedia.org/wikipedia/en/0/09/Circle_Logo.svg";
}

#c { 
  width: 400px;
  height: 200px;
}

<canvas id="c"></canvas>

在 img.onload() 中使用 drawImage() 在指定位置绘制图像，宽度和高度如下: 。