如何在HTML5畫布中顯示多個外部svg圖形

我已經創建了一個html5畫布並使用了 ctx.fillRect（X，Y，W，H）;和其他一些JavaScript功能。如何在HTML5畫布中顯示多個外部svg圖形

現在我想在該畫布的多個位置添加一個svg圖形。

我想使用svg的原因是圖像的清晰度&質量。我嘗試在HTML5中使用drawImage方法，但是我想要繪製的圖像在使用drawImage方法添加到畫布時不會提供非常優質的輸出。無論我使用多高分辨率圖像，圖像質量都很低。

但我認爲使用SVG圖形是解決方案。

這是我使用canvg.js在之前類似的問題被提及，但目前還不清楚試過我使用的代碼，

<canvas id="myCanvas" style="border: 2px solid #000000; width: 1280px; height: 800px;"></canvas> 
<img id="location" src="location.png" alt="The Scream" width="25.5" height="41.5"> 
<script > 
       var c = document.getElementById("myCanvas"); 
     var ctx = c.getContext("2d"); 

       ctx.fillRect(4,4, 12,10); 
     ctx.fillStyle=fontBlack;   
     ctx.fillText("1",8,10);  
     ctx.fillRect(5,16, 7, 16); 
     ctx.fillRect(5,33, 7, 28); 
     ctx.fillRect(5,62, 7, 50); 
     ctx.fillRect(5,113, 7, 15); 
     ctx.fillRect(5,129, 7, 15); 

//I have a list of coordinates in a javascript object list called selectedShelfList, I'm getting the necessary coordinates from that. 

function drawLocations(){ 

      for (var i=0; i<selectedShelfList.length; i++) 
      { 

       var x_coordinate = selectedShelfList[i].shelf_x; 
       var y_coordinate = selectedShelfList[i].shelf_y; 


       var img=document.getElementById("location"); 
       ctx.drawImage(img,x_coordinate,y_coordinate,8.5,13.8); 

       //Instead of drawImage method i want to use a code to show a svg graphic here 
      } 
     } 
</script >

由於我的解決方案計算器上找到了這個問題，。例如：

var ctx = document.getElementById('test').getContext('2d'); 
ctx.drawSvg('<svg><rect x="0" y="0" width="100" height="200" fill="red" /></svg>', 0 , 0 , 500, 500);

我如何給建議立即進行刪除在此命令外部SVG的網址是什麼？我可以使用''作爲drawSvg的參數嗎？例如：ctx.drawSvg（'location.svg'，0，0，500，500）;

有什麼辦法可以在畫布內顯示svg圖形嗎？ Canvg能做到這一點嗎？如果是這樣如何？

請幫我解決這個問題。 :)

來源

2013-08-20 direndd

[編輯：包括非常小的地圖銷的示例]

在一個小的10像素邊界將總是結果在像素化渲染一個圓。

只有太少的像素來「圓」邊緣。

這裏有一個更方形地圖銷的一個例子是遠不如像素化：

enter image description here

可以產生帆布碼本地圖腳是這樣的：

ctx.beginPath(); 
ctx.moveTo(100,100); 
ctx.lineTo(110,100); 
ctx.lineTo(110,107); 
ctx.lineTo(105,115); 
ctx.lineTo(100,107); 
ctx.lineTo(100,100); 
ctx.closePath(); 
ctx.fillStyle="gold"; 
ctx.fill(); 
ctx.strokeStyle="black"; 
ctx.lineWidth=2; 
ctx.stroke();

[原創回答]

由於SVG是矢量繪製的，因此SVG很好地縮放。

你應該能夠做到這一點，並獲得高品質的結果：

下載這個測試圖片：

https://dl.dropboxusercontent.com/u/139992952/stackoverflow/rocket.svg

然後同時保證質量這一代碼將縮放SVG火箭：

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 

<style> 
    body{ background-color: ivory; } 
    #canvas{border:1px solid red;} 
</style> 

<script> 
$(function(){ 

    var canvas=document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d"); 

    var size=100; 

    var svg1=new Image(); 
    svg1.width=150; 
    svg1.onload=function(){ 
     ctx.drawImage(svg1,0,0,size,size); 
    } 
    svg1.src="rocket.svg"; 

    $("#bigger").click(function(){ 
     size+=100; 
     ctx.drawImage(svg1,0,0,size,size); 
    }); 

}); // end $(function(){}); 
</script> 

</head> 

<body> 
    <button id="bigger">Bigger!</button><br> 
    <canvas id="canvas" width=900 height=900></canvas> 
</body> 
</html>

來源

2013-08-20 21:31:51 markE

我試過這個，但仍然svg繪製是非常低質量。其實你的方法產生較低的質量svg。 :( – direndd

適用於我！我編輯了我的答案，包括一個svg圖像的縮放，並且質量保持不變。 – markE

是的，在這個例子中它顯示了一個更清晰的圖像，但事情是，我試圖顯示一個svg在這個例子中，你已經使用了ctx.drawImage（svg1,0,0，size，size）; // Size = 100.在我的例子中，它是一個小圖標，應該是ctx.drawImage（svg1,0,0,10,14）;這使得圖像看起來質量很低（pixalated）：/ – direndd

使用canvg工作！

var ctx = document.getElementById('test').getContext('2d'); 
ctx.drawSvg('location.svg', 0 , 0 , 100, 100);

使用上述代碼工作。之前我沒有正確地將javascript文件添加到html文件中。

他們添加到本地文件夾的工作

<script type="text/javascript" src="rgbcolor.js"></script> 
<script type="text/javascript" src="StackBlur.js"></script> 
<script type="text/javascript" src="canvg.js"></script>

靜止圖像質量並不算多，但它比使用圖像的drawImage與方法好。

來源

2013-08-20 16:38:33 direndd

如何在HTML5畫布中顯示多個外部svg圖形

回答

相關問題