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

一种方法是使用声明三角形剪裁区域并绘制您显示的场景。场景仅显示在定义的剪辑区域内。

示例代码和演示：

＆＃13;

  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();
}

＆＃13;

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

＆＃13;

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

2 个答案: