填充图像与其他图像javascript/html5

fill image with other image javascript/html5

本文关键字：图像 html5 javascript 其他填充更新时间：2023-09-26

我需要以下资源http://www.filmfans.cz/test/index2.html的帮助我不知道如何在点击样品后改变粉红色的颜色。我想做一些类似于下面的链接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>

之前

问题解决了

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