如何使用图像DOM元素作为jCanvas中源属性的值？

我想测试这个例子：http://calebevans.me/projects/jcanvas/sandbox.php#%24%28%22canvas%22%29.drawImage%28%7B%0A%20%20source%3A%20%24%28%27%23image-fish%27%29%5B0%5D%2C%0A%20%20x%3A%2050%2C%20y%3A%2050%2C%0A%20%20width%3A%20100%2C%0A%20%20fromCenter%3A%20false%0A%7D%29%3B 如何使用图像DOM元素作为jCanvas中源属性的值？

但我没有在浏览器中看到任何结果，除了图像默认“img src”。请有人帮助我。我怎样才能使用这个功能？

<!doctype html> 
    <html> 
     <head> 
     <meta charset="utf-8"> 
     <title>Demo</title> 
     <canvas width="500" height="250"></canvas> 
     </head> 
     <script src="jquery.js"></script> 
     <script src="jcanvas.js"></script> 
     <script> 

     $("canvas").drawImage({ 
     source: $('#draggable')[0], 
     x: 50, y: 50, 
     width: 60, 
     fromCenter: false 
     }); 

     </script>    
     <body> 
      <img src="../image/0.jpg" class="drag-image" id="draggable"/> 
     </div> 
     </body> 
    </html>

谢谢。

来源

2012-06-02 Gobi

[请不要混淆你的URL（http://meta.stackexchange.com/a/64509/130770）（即使他们是* *难看......），堆栈溢出没有按毕竟，这个角色不会收取任何费用。我们想知道我们要去的地方。 –

设置画布标记的源时，图像标记未完全加载。因此，$（'＃draggable'）[0]返回undefined。尝试在文件加载时调用drawImage。以下内容应解决您的问题。

<!doctype html> 
    <html> 
     <head> 
     <meta charset="utf-8"> 
     <title>Demo</title> 
     <canvas width="500" height="250"></canvas> 
     </head> 
     <script src="jquery.js"></script> 
     <script src="jcanvas.js"></script> 
     <script> 

     $(document).ready(function(){ 
      $("canvas").drawImage({ 
       source: $('#draggable')[0], 
       x: 50, y: 50, 
       width: 60, 
       fromCenter: false 
       }); 
     }); 

     </script>    
     <body> 
      <img src="../image/0.jpg" class="drag-image" id="draggable"/> 
     </div> 
     </body> 
    </html>

来源

2012-06-04 18:34:41 sindhu

如何使用图像DOM元素作为jCanvas中源属性的值？

回答

相关问题