JavaScript: 是否可以从矩形中切出一个形状以在其中制作一个透明孔？

Question

我目前正尝试在 Javascript 中制作一个 2d top-down 游戏。我目前有一个 day/night 系统在工作，黑色矩形在最终完全不透明之前逐渐变得更不透明（随着时间的推移），模拟玩家看不到的夜晚高峰。

我想实现一个人造光系统，玩家可以使用手电筒照亮他们面前的一小块区域。但是，我的问题是我似乎无法从我的不透明矩形中找到 'cut out' 形状的方法。通过切出一个形状，看起来玩家有一个火炬。

请在下面找到我制作的示例模型图像来说明我的意思。 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

当 "light" 开启时，不是在场景上绘制一个矩形使其变暗，而是绘制一个 "lit" 区域完全透明而 "dark" 其余区域的图像区域更不透明。

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>

JavaScript: 是否可以从矩形中切出一个形状以在其中制作一个透明孔？

JavaScript: Is it possible to cut a shape out of a rectangle to make a transparent hole in it?

javascript

2d

canvas