フェザー寄宿生

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

は、新しいキャンバスを経由して、それのコピーを作成し、画像をぼかし先アウトCOMPと画像の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);