JavaScript：是否可以從矩形中切出一個形狀來製作一個透明的洞？

我想在Javascript中製作一個2d自上而下的遊戲。我現在有一個白天/黑夜系統，黑色矩形逐漸變得更加不透明（隨着時間的推移），最終完全不透明，模擬了玩家看不到的夜晚的高峯。JavaScript：是否可以從矩形中切出一個形狀來製作一個透明的洞？

我想實現一個人造燈光系統，玩家可以使用火炬照亮他們前面的一個小區域。但是，我的問題是，我似乎無法找到一種方法從我的不透明矩形中「剪出」形狀。通過切割形狀，它看起來像玩家有火炬。

請找一個我在下面做的模擬圖像來展示我的意思。 http://i.imgur.com/VqnTwoR.png 顯然形狀不應被理解爲粗略繪出爲:)

感謝您的時間，凸輪

編輯：用於繪製矩形的代碼如下：

context.fillStyle = "#000033"; 
    context.globalAlpha = checkLight(gameData.worldData.time); 
    context.fillRect(0, 0, 512, 480); 
    //This is where you have to add the cut out triangles for light! 
    context.stroke();

來源

2015-10-06 Cameron C

嗨，我圖中帆布的矩形。我將在矩形代碼中編輯原始問題。 –

一種方法是使用聲明一個三角形的剪輯區域並繪製您的顯示場景。場景將只顯示在定義的剪輯區域內。

實施例的代碼和一個演示：

var canvas = document.getElementById('myCanvas'); 
 
    var context = canvas.getContext('2d'); 
 
    var x = canvas.width/2; 
 
    var y = canvas.height/2; 
 
    var radius = 75; 
 
    var offset = 50; 
 

 
    var img = new Image(); 
 
    img.onload = function() { 
 
knockoutAndRefill(50,100,300,50,75,350); 
 
    }; 
 
    img.src = 'http://guideimg.alibaba.com/images/trip/1/03/18/7/landscape-arch_68367.jpg'; 
 

 

 
function knockoutAndRefill(x0,y0,x1,y1,x2,y2){ 
 
    context.save(); 
 
    context.fillStyle='black'; 
 
    context.fillRect(0,0,canvas.width,canvas.height); 
 
    context.beginPath(); 
 
    context.moveTo(x0,y0); 
 
    context.lineTo(x1,y1); 
 
    context.lineTo(x2,y2); 
 
    context.closePath(); 
 
    context.clip(); 
 
    context.drawImage(img,0,0); 
 
    context.restore(); 
 
}

<canvas id=myCanvas width=500 height=400>

來源

2015-10-06 17:35:45 markE

而不是在場景上畫一個矩形使其變暗，而是在「亮」時亮起，而是繪製一個圖像，其中「亮起」區完全透明，而「黑暗」區的其餘部分更加不透明。

來源

2015-10-06 17:33:45 Chaz

JavaScript：是否可以從矩形中切出一個形狀來製作一個透明的洞？

回答

相關問題