Javascript 如何在jCanvas中将图像DOM元素用作源属性的值？_Javascript_Jquery_Jcanvas

Javascript 如何在jCanvas中将图像DOM元素用作源属性的值？

javascript jquery

Javascript 如何在jCanvas中将图像DOM元素用作源属性的值？,javascript,jquery,jcanvas,Javascript,Jquery,Jcanvas,我想测试这个例子：但我在浏览器中看不到任何结果，除了默认的图像“imgsrc”。请有人帮帮我。如何使用此功能 <!doctype html> <html> <head> <meta charset="utf-8"> <title>Demo</title> <canvas width="500" height="250"></canv

我想测试这个例子：

但我在浏览器中看不到任何结果，除了默认的图像“imgsrc”。请有人帮帮我。如何使用此功能

  <!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>


演示
$（“画布”）.drawImage({
资料来源：$（“#可拖动”）[0]，
x:50，y:50，
宽度：60，
fromCenter:false
});

谢谢。

设置画布标记的源时，图像标记未完全加载。因此，$（'#draggable'）[0]返回未定义。尝试在加载文档时调用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>


演示
$（文档）.ready（函数（）{
$（“画布”）.drawImage({
资料来源：$（“#可拖动”）[0]，
x:50，y:50，
宽度：60，
fromCenter:false
});
});

（即使它们很难看…），堆栈溢出毕竟不会按字符收费。我们想知道我们要去哪里。