通过程序在HTML画布上绘制SVG文件

Question

通过程序在HTML画布上绘制SVG文件

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元素，绘制在画布上后将其隐藏。非常不正常！如果我只使用window.onload而不是setTimeout，它不起作用。它会隐藏img，但drawImage（）什么也不做，可能是因为当窗口已经完成加载时，画布还没有准备好。有什么想法吗？

- honkskillet

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- shibbybird · Accepted Answer

我没有你的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();