0

我试图弄清楚CanvasRenderingContext2D.globalCompositeOperation = "destination-out以创建“战争迷雾”效果。

鉴于这个例子

https://jsfiddle.net/wobzpjLL/

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// a green background box
ctx.fillStyle = "green";
ctx.fillRect(0,0,300,150); 

// a line
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(300, 150);
ctx.stroke();

// Fog of war
ctx.fillStyle = "black";
ctx.fillRect(0,0,300,150); 

// Here I want two circles that shows the background (green & line)

// text
ctx.fillStyle = "red";
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50);

如何创建两个不包括黑色覆盖的圆圈，以便用户可以在这两个圆圈内看到绿色背景和线条，其他地方都是黑色（因此产生战争迷雾效果）？

4

1 回答 1

1

使用面具

使用合成的战争迷雾

实现遮罩的最简单方法是创建一个屏幕外画布并将遮罩渲染到上面。然后在制作动画时渲染世界，然后使用"destination-in". 您可以使用画布 CSS 背景作为雾（如演示中所做的那样），或者您可以在顶部渲染雾，"destination-over"也可以使用文本在演示中显示。

分层渲染

就个人而言，为了性能（如果代码需要它可以得到的每一个中断），我会globalCompositeOperation通过在演示中创建掩码的反转来避免和渲染世界上的雾。这仅添加了一个额外的渲染调用，无需更改复合操作

使用组合的示例

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

function createCanvas(){
  var c = document.createElement("canvas");
  c.width = 300;
  c.height = 150;
  c.ctx = c.getContext("2d");
  return c;
}

// draw game world on offscreen canvas
function drawBackground(ctx){
  ctx.fillStyle = "green";
  ctx.fillRect(0,0,300,150); 

  // a line
  ctx.beginPath();
  ctx.lineWidth = 3;
  ctx.strokeStyle = "#08A";
  ctx.lineTo(0, 0);
  ctx.lineTo(300, 150);
  ctx.stroke();
}

// create and render world
var bGround = createCanvas();
drawBackground(bGround.ctx)


// create mask 
var grad = ctx.createRadialGradient(0,0,60,0,0,0);
grad.addColorStop(0,"rgba(0,0,0,0.0)");
grad.addColorStop(0.2,"rgba(0,0,0,1)");
grad.addColorStop(1,"rgba(0,0,0,1)");

var mask = createCanvas();
mask.ctx.setTransform(1,0,0,1,75,75);
mask.ctx.fillStyle = grad;
mask.ctx.beginPath();
mask.ctx.arc(0,0,60,0,Math.PI*2);
mask.ctx.fill();
mask.ctx.setTransform(1,0,0,1,225,75);
mask.ctx.beginPath();
mask.ctx.arc(0,0,60,0,Math.PI*2);
mask.ctx.fill();
document.body.appendChild(mask);

// draws the fog
function drawFog(ctx,x){
  ctx.globalCompositeOperation = "destination-in";
  ctx.drawImage(mask, x, 0);
  ctx.globalCompositeOperation = "source-over";
}

ctx.fillStyle = "red";
ctx.font = "30px Arial";
function loop(time){
  ctx.drawImage(bGround,0,0);
  drawFog(ctx,Math.sin(time / 1000) *20);
  ctx.globalCompositeOperation = "destination-over";
  ctx.fillText("Hello World",10,50); 
  ctx.globalCompositeOperation = "source-over";
  requestAnimationFrame(loop);
}
requestAnimationFrame(loop);
canvas {
  border:1px solid #d3d3d3;
  
}
<canvas id="myCanvas" width="300" height="150" style="background : black;" ></canvas>
<div>Pre rendered offscreen mask shown below for display only.</div>

于 2017-06-19T00:24:16.467 回答