用其他圖像填充圖像javascript/html5

我需要以下資源的幫助http://www.filmfans.cz/test/index2.html 我不知道如何在點擊樣本後更改pinquen的顏色。我想請在下面的鏈接http://www.pixelbox.sk/fileadmin/Flash/cosmo_2.swf 用其他圖像填充圖像javascript/html5

類似的東西在這裏是我的代碼

 
    
    $(window).load(function(){ 
    var width = $(window).width(); 
    var height = $(window).height(); 

var c = document.getElementById("a"); 
var ctx = c.getContext("2d"); 


var can2 = document.createElement('canvas'); 
document.body.appendChild(can2) 

can2.width = c.width; 
can2.height= c.height; 
var ctx2 = can2.getContext("2d"); 

var test= new Image(); 
test.src = "tux.png"; 
test.onload = function() { 
ctx2.drawImage(test, 0, 0); 
} 

var img = new Image(); 
img.src = "2.png"; 
img.onload = function(){ 


ctx2.globalCompositeOperation = "source-in"; 
var pattern = ctx2.createPattern(img, "repeat"); 
ctx2.fillStyle=pattern; 
ctx2.fillRect(0,0,300,300); 
} 


}); 


$(document).ready(function() { 
$('.klik').click(function() { 
var adresa = $(this).children('img').attr('src'); 
var canvas = document.getElementById("a"); 
canvas.width = canvas.width;//blanks the canvas 
var c = canvas.getContext("2d"); 
var img = new Image(); 
img.src = adresa; 
img.onload = function(){ 


var pattern = c.createPattern(img, "repeat"); 
//c.globalCompositeOperation = "source-in"; 
c.fillStyle=pattern; 
c.fillRect(0,0,300,300); 
} 

    // c.drawImage(img, 0, 0); 
    //} 
//return false; 

}); 
}); 
</code> 
</pre>

問題解決了！

來源

2013-03-13 Peter Uhrin

似乎在Chrome中很好地工作。如果我點擊圖像（或其標籤），圖像會改變。那究竟是什麼問題？ – Flauwekeul 2013-03-13 10:18:36

點擊更改背景，但我想改變只是平針圖像不背景 – 2013-03-13 10:20:33

使用與source-in第二，暫時油畫是正確的觀念：

ctx2.drawImage(test, 0, 0); 
ctx2.globalCompositeOperation = 'source-in'; 
var ptrn = ctx2.createPattern(pattern,'repeat'); 
ctx2.fillStyle = ptrn; 
ctx2.fillRect(0,0,300,300); 
ctx.drawImage(can2,0,0)

活生生的例子：

來源

2013-03-13 15:41:09

我解決了這個問題，但你的答案thanx – 2013-03-13 18:08:27

用其他圖像填充圖像javascript/html5

回答

相關問題