drawimage到一個已確定的畫布寬度和高度

Question

如果源svg在響應環境中，我如何使用drawImage()繪製到給定的畫布大小？

示例：如果原始svg爲550 x 650並且正在移動設備上查看svg，則如何將svg繪製到412.5 x 487.5畫布上（因此顯然svg會比原始尺寸更小）？

Fiddle

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的寬度和高度參數在圖像中繪製。

請注意，位圖只能取整數值，所以您的畫布必須是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