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>