Question

我有一组坐标，每对我都想在画布上放置一个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

＆＃13;

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";
}

＆＃13;

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

＆＃13;

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

＆＃13;

img.onload()中的

使用drawImage()以widht和height绘制指定位置的图像。

在画布上绘制SVG

1 个答案: