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

使用第二个临时画布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 回答