如何使用圖像DOM元素作為jCanvas中source屬性的值？

Question

我想測試這個例子： http ： //calebevans.me/projects/jcanvas/sandbox.php#%24%28%22canvas%22%29.drawImage%28%7B%0A%20%20source%3A%20% 24％28％27％23image魚％27％29％5B0％5D％2C％0A％20％20×％3A％2050％2C％20Y％3A％2050％2C％0A％20％20width％3A％20100％ 2C％0A％20％20fromCenter％3A％20false％0A％7D％29％3B

但我沒有在瀏覽器中看到任何結果，默認情況下為“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>

謝謝。

Answer 1

設置canvas標記的source時，image標記未完全加載。 結果，$（'＃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>

如何使用圖像DOM元素作為jCanvas中source屬性的值？

問題描述

1 個解決方案

解決方案1
2 2012-06-04 18:34:41

如何使用圖像DOM元素作為jCanvas中source屬性的值？

問題描述

1 個解決方案

解決方案1 2 2012-06-04 18:34:41

解決方案1
2 2012-06-04 18:34:41