如何在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图形

回答

相关问题