Question

 var canvas = document.getElementById("canvaspreview");
       canvas.width=w;canvas.height=h;
       var ctx=canvas.getContext("2d");    
      var img=new Image();


      img.src=url;img.width=w;img.height=h;
      ctx.drawImage(img,0,0,w,h);

我们期望从这段代码中通过其在Canvas DOMElement中的Url绘制图像，但是，当我检查DOM时，我注意到在canvas之后插入了一个新的DOMELement IMG。

是否建议使用其他语法，已知DOM似乎是这样的：

<div id="bigpreview" style="display:block;">
  <canvas id="canvaspreview" width="800" height="520">Canvas not supported </canvas> 
</div>

结果我得到了：

<div id="bigpreview" style="display:block;">
  <canvas id="canvaspreview" width="800" height="520">Canvas not supported </canvas> 
  <img src="" width="" height=""/>
</div>

Answer 1

FOUND！

在图像加载

之后，应该完成绘制图像
img.onload=function(e){ ctx.drawImage(img,0,0,w,h); // بقية الكود هنا }

请参阅此example：

Canvas drawImage函数在canvas之后插入img

1 个答案: