Как я могу изменить источник изображения в пределах холста, используя jquery?

Question

Следующий код определяет источники двух изображений на холсте HTML5:

var sources = { darthVader: "darth-vader.jpg", yoda: "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>