JavaScript：是否可以從矩形中切出形狀以在其中形成透明孔？

Question

我目前正在嘗試用Javascript制作2D自上而下的游戲。 我目前有一個日/夜系統，其中一個黑色矩形在最終完全變得不透明之前逐漸變得不透明（隨着白天的進行），它模擬了玩家看不見的夜晚的高峰。

我想實現一個人造光系統，玩家可以使用手電筒照亮他們前方的一小塊區域。 但是，我的問題是我似乎無法找到從不透明矩形中“切出”形狀的方法。 通過切出一個形狀，玩家看起來像是在割炬。

請在下面找到我制作的示例樣機圖像，以顯示我的意思。 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();

Answer 1

不用在“燈光”打開時在場景上繪制矩形以使其變暗，而是在“照明”區域完全透明且“黑暗”區域的其余部分更不透明的情況下繪制圖像。

Answer 2

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

示例代碼和演示：

  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>