如何使用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>