将图像绘制到指定的画布宽度和高度答案

【问题标题】：drawimage to a secified canvas width and height将图像绘制到指定的画布宽度和高度
【发布时间】：2015-04-05 08:42:18
【问题描述】：

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

示例：如果原始 svg 为 550 x 650 并且正在移动设备上查看，我如何将 svg 绘制到 412.5 x 487.5 的画布上（显然 svg 会比原始尺寸小） ?

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

【问题讨论】：

标签： javascript html canvas svg

【解决方案1】：

加载 SVG 后，只需设置画布大小，然后使用 drawImage 的宽度和高度参数在图像中绘制。

请注意，位图只能采用整数值，因此您的画布必须为 413x488 或 412x487。如果您不设置画布大小，它将默认为 300x150，然后拉伸到您用于样式/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

【讨论】：