如何在html5画布中显示多个外部svg图形 [英] How to show multiple external svg graphics in a html5 canvas
问题描述
我创建了一个html 5画布，并使用
ctx.fillRect（X，Y，W，H）添加了一些形状;和其他一些javascript函数。
I have created a html 5 canvas and added some shapes using ctx.fillRect(X,Y,W,H); and some other javascript functions.
现在我想在该画布的多个位置添加一个svg图形。
Now i want to add a svg graphic in multiple places of that canvas.
我想使用svg的原因是锐度&图像质量。
我尝试在HTML5中使用drawImage方法，但我想要绘制的图像在使用drawImage方法添加到画布时不会提供非常高质量的输出。无论我使用它的高分辨率图像如何使得它非常低质量图像。
The reason i want to use a svg is the sharpness & quality of the image. I tried using drawImage method in HTML5 but the image i want to draw is doesn't give a very quality output when it's added to the canvas using drawImage method.No matter how high resolution image i use it makes a very low quality image.
但我认为使用svg图形是解决方案。
But i think using a svg graphic is the solution.
这是我使用的代码，
<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 >
我在stackoverflow上发现这个问题的解决方案，
我尝试使用canvg.js作为在之前的类似问题中提到过，但目前尚不清楚。
例如：
As solutions i found on stackoverflow for this problem, I tried using canvg.js as mentioned in the previous similar questions but it wasn't clear. for example:
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提供url？
我可以在''作为drawSvg的参数之间使用url吗？
例如：ctx.drawSvg（'location.svg'，0,0,500,500）;
How shoul i give the url for external svg in this command? Can i use the url in between the '' as the parameter for drawSvg ? Eg: ctx.drawSvg('location.svg', 0 , 0 , 500, 500);
有什么方法可以显示svg图形在画布里面？
canvg可以做到吗？如果是这样怎么样？
Is there any way i can show a svg graphic inside a canvas? Can canvg do the trick? If so how exactly?
请帮我解决这个问题。 ：）
Please help me on this. :)
推荐答案
[已编辑：包含非常小的地图图钉示例]
在小的10像素边界中渲染圆圈将始终导致像素化。
Rendering a circle in a small 10 pixel boundary will always result in pixilation.
只有太少的像素来围绕边缘。
There's just too few pixels to "round" an edge.
这是一个更方形的地图引脚的例子，它的像素化程度要小得多：
Here's an example of a more square map pin that is far less pixelated:
您可以在画布代码中生成此地图图钉这个：
You can produce this map pin in canvas code like this:
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 scales well since it is vector drawn.
你应该能够做到这一点并获得高质量的结果：
You should be able to do this and get a high quality result:
下载此测试图片：
https://dl.dropboxusercontent.com/u/139992952/stackoverflow/rocket.svg
然后这个代码将在保持质量的同时缩放svg火箭：
Then this code will scale the svg rocket while maintaining quality:
<!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>
这篇关于如何在html5画布中显示多个外部svg图形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
