0

次のリソースについて助けが必要ですhttp://www.filmfans.cz/test/index2.html サンプルをクリックした後に pinquen の色を変更する方法がわかりません。次のリンクのように何かしたいと思います http://www.pixelbox.sk/fileadmin/Flash/cosmo_2.swf

これが私のコードです 

    
    $(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>

問題が解決しました ！

4

1 に答える 1

1

2 番目の一時的なキャンバスを使用する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)

ライブの例:

http://jsfiddle.net/UcGrC/

于 2013-03-13T15:41:09.140 に答える