画布：在整个画布上创建半透明覆盖，除了一个窗口答案

【问题标题】：Canvas: create semi-transparent overlay over entire canvas except one window画布：在整个画布上创建半透明覆盖，除了一个窗口
【发布时间】：2020-09-14 09:16:40
【问题描述】：

我有一个矩形画布，上面画了一幅图像。当用户将光标移到画布上时，我想让画布半透明 except 用于光标周围的一个小矩形，我想保留完全不透明的底层图像内容。

所以我的简短问题是如何“静音”画布，除了一个小矩形。

我的第一个想法是在整个画布上创建一个半透明的叠加层，然后再次绘制应该完全不透明度的矩形区域，但这会使背景消失，而我想将其保留为 0.2 不透明度：

var elem = document.querySelector('canvas');
var ctx = elem.getContext('2d');

elem.width = 400;
elem.height = 300;

ctx.fillStyle = '#ff0000';
ctx.fillRect(0, 0, elem.width, elem.height);

elem.addEventListener('mousemove', function(e) {
  ctx.globalAlpha = 0.2;
  ctx.fillStyle = '#ffffff';
  ctx.fillRect(0, 0, elem.width, elem.height);
  var x = e.clientX;
  var y = e.clientY;
  var d = 30;
  ctx.fillStyle = '#ff0000';
  ctx.fillRect(x-d, y-d, d*2, d*2);
})

&lt;canvas/&gt;

有没有人知道将背景静音到 0.2 不透明度同时保持光标周围的矩形完全不透明度的最高效方法？任何指针都会非常有帮助！

【问题讨论】：

啊，我刚刚看到另一个画布在这个画布上，它可以使光标附近的区域不透明...

标签： javascript html canvas

【解决方案1】：

这是两个canvas方法：

var elemA = document.querySelector('#a');
var elemB = document.querySelector('#b');
var ctx = elemA.getContext('2d');
var bctx = elemB.getContext('2d');

elemA.width = elemB.width = 400;
elemA.height = elemB.height = 300;

ctx.fillStyle = '#ff0000';
ctx.fillRect(0, 0, elemA.width, elemA.height);
elemB.addEventListener('mousemove', function(e) {
  bctx.clearRect(0, 0, elemB.width, elemB.height);
  
  var x = e.clientX;
  var y = e.clientY;
  var x0 = x-10;
  var x1 = x+10;
  var y0 = y-10;
  var y1 = y+10;

  // draw boxes; origin is top left
  bctx.globalAlpha = 0.8;
  bctx.fillStyle = '#ffffff';
  bctx.fillRect(0, 0, elemA.width, y0); // top
  bctx.fillRect(0, y0, x0, elemB.height+20); // left
  bctx.fillRect(x0, y1, elemB.width+20, elemB.height); // bottom
  bctx.fillRect(x1, y0, elemA.width, y1-y0); // right
})

* {
  margin: 0;
}

#c {
  position: relative;
}

#a, #b {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

#b {
  z-index: 1;
  opacity: 0.5;
}

<div id='c'>
  <canvas id='a'></canvas>
  <canvas id='b'></canvas>
</div>

【讨论】：