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 を指定するにはどうすればよいですか? drawSvg のパラメーターとして '' の間の URL を使用できますか? 例: ctx.drawSvg('location.svg', 0 , 0 , 500, 500);

キャンバス内に svg グラフィックを表示する方法はありますか? canvgはトリックを行うことができますか? もしそうなら、どのように正確に？

これについて私を助けてください。:)

4

2 に答える 2

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 に答える