1

我创建了一个 html 5 画布并使用 ctx.fillRect(X,Y,W,H); 添加了一些形状；和其他一些javascript函数。

现在我想在该画布的多个位置添加一个 svg 图形。

我想使用 svg 的原因是图像的清晰度和质量。我尝试在 HTML5 中使用 drawImage 方法，但是当我使用 drawImage 方法将其添加到画布时，我想要绘制的图像并没有提供非常高质量的输出。无论我使用多么高分辨率的图像，它都会产生非常低质量的图像。

但我认为使用 svg 图形是解决方案。

这是我使用的代码，

    <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，但不清楚。例如：

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？我可以使用 '' 之间的 url 作为 drawSvg 的参数吗？例如：ctx.drawSvg('location.svg', 0 , 0 , 500, 500);

有什么办法可以在画布内显示 svg 图形？canvg 能解决问题吗？如果是这样，具体如何？

请帮助我。:)

4

2 回答 2

1

[编辑：包括非常小的地图针的例子]

在一个 10 像素的小边界上渲染一个圆圈总是会导致像素化。

“圆”边缘的像素太少了。

这是一个像素化程度更低的方形地图图钉示例：

在此处输入图像描述

您可以在画布代码中生成此地图图钉，如下所示：

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 可以很好地缩放，因为它是矢量绘制的。

您应该能够做到这一点并获得高质量的结果：

下载此测试图像：

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-20T21:31:51.873 回答
0

使用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-20T16:38:33.240 回答