Question

如果源svg处于响应环境，如何使用drawImage()绘制给定的画布大小？

示例：如果原始svg为550 x 650并且正在移动设备上查看（如此显然svg将小于原始大小），如何将svg绘制到412.5 x 487.5画布上？？

svgToImage(svg2, function(img2){
        ctx2.drawImage(img2, 0, 0);
      });

      function svgToImage(svg2, callback) {
        var nurl = "data:image/svg+xml;utf8," + encodeURIComponent(svg2),
            img2 = new Image;

          img2.onload = function() {
             callback(img2);
          }
          img2.src = nurl;
      }

Answer 1

当你加载SVG时，只需设置画布大小，然后使用drawImage的width和height参数在图像中绘制。

请注意，位图只能采用整数值，因此您的画布必须为413x488或412x487。如果你没有设置画布大小，它将默认为300x150，然后拉伸到你用于style / CSS的大小：

  svgToImage(svg2, function(img2){
      ctx2.canvas.width = 413;               // set canvas size
      ctx2.canvas.height = 488;
      ctx2.drawImage(img2, 0, 0, 413, 488);  // draw SVG/image at same size
  });

<强> Updated fiddle

drawimage到指定的画布宽度和高度

1 个答案: