[英]How can I change the image source within a canvas using jquery?
以下代碼確定HTML5 Canvas中兩個圖像的來源:
var sources = {darthVader:“darth-vader.jpg”,yoda:“yoda.jpg”};
有沒有辦法可以使用jquery更改這些圖像的來源?
我認為@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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.