如何向畫布添加多個形狀遮罩

Question

我正在嘗試向圖像添加多個形狀遮罩。我調用了一個函數，它接受座標並在屏幕上繪製一個正方形。這個正方形顯示圖像的一部分。這工作正常。之後，它不會重新繪製。我想要發生的是，我在屏幕上繪製了幾個形狀/蒙版以最終顯示整個圖像。

var baseImg; 
    var ctx; 
    var img; 
    var imageLoaded = false; 
    var gridWidth = 50; 
    var gridHeight = 50; 

    function init() { 
     baseImg = $('#baseImg')[0]; 
     ctx = baseImg.getContext('2d'); 
     img = new Image(); 
     imageLoaded = false; 

     img.onload = function() { 
      imageLoaded = true; 
     } 
     img.src = './images/tiles.jpg'; 
    }; 

    function showMask(maskCoord){ 
     if(!imageLoaded) return; 

     var originPoint = { 
      x : (gridWidth * maskCoord.x), 
      y : (gridHeight * maskCoord.y) 
     } 

     ctx.beginPath(); 
     ctx.moveTo(originPoint.x, originPoint.y); 
     ctx.lineTo((originPoint.x + gridWidth), originPoint.y); 
     ctx.lineTo((originPoint.x + gridWidth), (originPoint.y + gridHeight)); 
     ctx.lineTo(originPoint.x, (originPoint.y + gridHeight)); 
     ctx.closePath(); 
     ctx.clip(); 

     /// draw the image to be clipped 
     ctx.drawImage(img, 0, 0); 
    } 

這是我正在做的事情的鏈接。

http://jsfiddle.net/DezOnlyOne/CLYNA/4/

Answer 1

當你剪輯，可以減少可以得出所提供的路徑的區域。而且由於兩個網格單元完全不相交，所以在多個單元格上剪切將會產生空的結果。

解決方法是在下一次繪製之前'取消'之前的剪裁：save（）和restore（）是兩個函數，它們允許您在某個點保存上下文，然後將其恢復爲完全「乾淨」原始狀態畫。

http://jsfiddle.net/gamealchemist/CLYNA/7/

function showMask(maskCoord) { 
    if (!imageLoaded) return; 
    var originPoint = { 
     x: (gridWidth * maskCoord.x), 
     y: (gridHeight * maskCoord.y) 
    } 
    ctx.save(); 
    ctx.beginPath(); 
    ctx.rect(originPoint.x, originPoint.y, gridWidth, gridHeight); 
    ctx.closePath(); 
    ctx.clip(); 
    /// draw the image to be clipped 
    ctx.drawImage(img, 0, 0); 
    ctx.restore(); 
}