3

javascript を使用してキャンバスに svg を描画する際に問題が発生しました。これを機能させたい... HTML

<canvas class="buttonCanvas" id="handCanvas" height="60px" width="60px"  />

Javascript

function drawHandCanvas(){
   var canvas = document.getElementById('handCanvas');
   var ctx = canvas.getContext('2d');
   var img=  document.createElement('img');
   img.src='images/handCursor.svg';
   img.width = 60;  img.height = 60;
   ctx.drawImage(img,0,0);
}
drawHandCanvas();

しかし、そうではありません。

SVG 要素を追加すると、これを機能させることができます。HTML

<canvas class="buttonCanvas" id="handCanvas" height="60px" width="60px"  />
<img id="handSVG" src="images/handCursor.svg"/>

Javascript

function drawHandCanvas(){
    var canvas = document.getElementById('handCanvas');
    var ctx = canvas.getContext('2d');
    var img=document.getElementById('handSVG');
    img.width = 60; img.height = 60;    
    setTimeout(function(){
        ctx.drawImage(img,0,0);
        img.hidden='true';
    }, 10);         
}
drawHandCanvas();

この 2 番目の方法では、 setTimeout メソッドを使用して動作させ、下の行の最後に img 要素を追加する必要があることに注意してください。これは、キャンバスに描画した後に非表示にします。スーパーハッキー！setTimeout の代わりに window.onload を使用しただけでは機能しません。img は非表示になりますが、drawImage() は何もしません。おそらく、ウィンドウの読み込みが既に完了しているときにキャンバスの準備ができていないためです。何かご意見は？

4

1 に答える 1

8

私はあなたのsvgファイルを持っていませんが、キャンバスに読み込まれる前に、通常は画像が読み込まれるまで待たなければならないと言われています。ないものを描くようなものです。これはあなたのために働くべきだと思います。

function drawHandCanvas(){
   var canvas = document.getElementById('handCanvas');
   var ctx = canvas.getContext('2d');
   var img=  document.createElement('img');

   img.onload = function(){
    ctx.drawImage(this,0,0);
   }

    img.src='images/handCursor.svg';
    img.width = 60;  img.height = 60;

}
drawHandCanvas();
于 2013-11-09T01:52:08.393 に答える