Question

我需要以下资源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>

问题解决了！

Answer 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/

用其他图片javascript / html5填充图片

1 个答案: