如何使用jquery在畫布內更改圖像源？

Question

以下代碼確定HTML5畫布內的兩個圖像的來源：

VAR源= { 達斯·維達： 「達斯-vader.jpg」， 尤達： 「yoda.jpg」 };

有沒有一種方法可以使用jquery更改這些圖像的來源？

Answer 1

我認爲@robertc有你所追求的，或者如果你的圖片存儲在其他地方，並且你想根據事件更新畫布（例如鏈接/圖片點擊），你需要做類似以下的事情;

<canvas id="e" width="177" height="113"></canvas> 
<script src="jquery.js"></script> 
<script> 
// This originally sets the canvas up with image.jpg 
    var canvas = $("#e")[0]; // only get first one 
    var context = canvas.getContext("2d"); 
    var img = new Image(); 
    img.src = "image.jpg"; 
    img.onload = function() { 
    context.drawImage(img, 0, 0); 
    }; 
    </script> 
    <a id="a">click</a> 

    <script> 
    $('#a').click(function(){ 
    var canvas = $('#e')[0]; 
    canvas.width = canvas.width;//blanks the canvas 
    var c = canvas.getContext("2d"); 
    var img = new Image(); 
    img.src = 'image2.jpg'; 
    img.onload = function(){ 
    c.drawImage(img, 0, 0); 
    } 
    return false; 
    }); 
    </script>