羽毛寄宿

Question

我有以下圖像的帆布加載：

背景圖像：

正面圖像：

兩者一起看起來像此圖片：

現在我想羽毛效果應用於手寄宿導致對這樣的事情：

我嘗試以下解決方案爲止。但結果並不像上面的圖片。

 
var temp = document.createElement('canvas'), 
 
       tx = temp.getContext('2d'); 
 

 
      temp.width = scope.canvas.width; 
 
      temp.height = scope.canvas.height; 
 

 
      tx.translate(-temp.width, 0); 
 
      tx.shadowOffsetX = temp.width; 
 
      tx.shadowOffsetY = 0; 
 
      tx.shadowColor = '#000'; 
 
      tx.shadowBlur = 100; 
 

 
      var img = new Image(); 
 
      img.onload = function() { 
 
       tx.drawImage(img, 0, 0, 512, 512); 
 
      }; 
 
      img.src = imageURL; // the hand image 
 

 

 
var temp2 = document.createElement('canvas'), 
 
       tx2 = temp2.getContext('2d'); 
 
      temp2.width = scope.canvas.width; 
 
      temp2.height = scope.canvas.height; 
 

 
      var img2 = new Image(); 
 
      img2.onload = function() { 
 
       tx2.drawImage(img2, 0, 0, 512, 512); 
 
       tx2.save(); 
 
       tx2.globalCompositeOperation = 'destination-out'; 
 
       tx2.drawImage(temp, 0, 0); 
 
       tx2.restore(); 
 

 
    
 
      }; 
 
      img2.src = temp.toDataURL("image/png");

不知道如何解決這個問題？

問候 史蒂夫

Answer 1

要羽化的圖像，通過一個新的畫布創建一個副本，創建目的地進行補償圖像的INVERS面具。然後再次拉動手，然後用目標ou掩蓋，但帶上陰影以創造羽毛。

var canvas = document.createElement("canvas"); 
 
canvas.width = 1024,canvas.height = 1024; 
 
var ctx = canvas.getContext("2d"); 
 
document.body.appendChild(canvas); 
 

 
var hand = new Image(); 
 
hand .src = "http://i.stack.imgur.com/PbAfc.png"; 
 
hand .onload = function(){ 
 
    var can = document.createElement("canvas"); 
 
    can.width = this.width; 
 
    can.height = this.height; 
 
    ct = can.getContext("2d"); 
 
    // create inverted mask 
 
    ct.fillStyle = "black"; 
 
    ct.fillRect(0,0,this.width,this.height); 
 
    ct.globalCompositeOperation = "destination-out"; 
 
    ct.drawImage(this,0,0); 
 
    // create second canvas 
 
    var can1 = document.createElement("canvas"); 
 
    can1.width = this.width; 
 
    can1.height = this.height; 
 
    ct1 = can1.getContext("2d"); 
 
    // draw image 
 
    ct1.drawImage(this,0,0); 
 
    ct1.shadowColor = "black"; 
 
    ct1.shadowBlur = 30; // amount of feather 
 
    ct1.globalCompositeOperation = "destination-out"; 
 
    ct1.drawImage(can,0,0); 
 
    ct1.shadowBlur = 20; // amount of feather 
 
    ct1.drawImage(can,0,0); // The mor you draw the greater the FX 
 
    ct1.shadowBlur = 10; // amount of feather 
 
    ct1.drawImage(can,0,0); // The mor you draw the greater the FX 
 

 
    ct1.globalCompositeOperation = "source-over"; 
 
    ct.globalCompositeOperation = "source-over"; 
 
    ctx.drawImage(can1,0,0); 
 
    // use the new canvas can1 as the hand image in later code. 
 
} 
 
//ctx.fillStyle = "#e19e9e" 
 
ctx.fillRect(0,0,1024,1024);