globalAlpha无法与Safari上的globalCompositeOperation一起使用

如何解决globalAlpha无法与Safari上的globalCompositeOperation一起使用

我尝试在 globalCompositeOperation设置为'source-out'和 globalAlpha设置为0.2 的情况下，在另一个内部画布元素的顶部渲染两个矩形。然而，globalAlpha在 Safari 和外部矩形（使用不透明度1渲染）上不起作用。

下面是代码。

const el = document.getElementById('canvas');
  const ctx = el.getContext('2d');
  ctx.globalCompositeOperation = 'source-out';
  ctx.beginPath();
  ctx.rect(200,200,400,400);
  ctx.closePath();
  ctx.fill();
  ctx.globalAlpha = 0.2;
  ctx.beginPath();
  ctx.rect(0,800,800);
  ctx.closePath();
  ctx.fill();

body {
  background-color: white;
  margin: 0;
}

.canvas-container {
  position: relative;
  width: 75%;
  height: 0;
  margin: auto;
  margin-top : 50px;
  padding-bottom: 75%;
}

.canvas-container .canvas{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<!DOCTYPE HTML>
<html>
  <head>
    <link rel="stylesheet" href="main.css">
  </head>
  <body>
    <div class="canvas-container">
      This is canvas container
      <canvas id="canvas" class="canvas" width="800" height="800"></canvas>
    </div>
  </body>
</html>

解决方法

我绝对可以重现该错误，并且作为错误，唯一真正的解决方案是report it，希望它得到解决。

现在，有很多变通办法。

第一个方法是使用半透明的fillStyle而不是globalAlpha：

const el = document.getElementById('canvas');
const ctx = el.getContext('2d');

ctx.beginPath();
ctx.rect(100,100,200,200);
ctx.fill();

ctx.globalCompositeOperation = 'source-out';
ctx.fillStyle = "rgba(0,0.2)";

ctx.beginPath();
ctx.rect(0,400,400);
ctx.fill();

canvas { border: 1px solid; }

<canvas id="canvas" class="canvas" width="400" height="400"></canvas>

但这可能并不实际，例如，如果您有复杂的渐变甚至是fillStyle的图案。

第二种解决方法是使用fillRect()方法，该方法不受错误的影响。

const el = document.getElementById('canvas');
const ctx = el.getContext('2d');

ctx.beginPath();
ctx.rect(100,200);
ctx.fill();

ctx.globalCompositeOperation = 'source-out';
ctx.globalAlpha = 0.2;

ctx.fillRect(0,400);

canvas { border: 1px solid; }

<canvas id="canvas" class="canvas" width="400" height="400"></canvas>

但这显然仅适用于矩形，不适用于任何其他形状。

因此，第三种解决方法（可能是最好的解决方法）在于以另一种方式绘制：首先绘制半透明轮廓，然后绘制孔：

const el = document.getElementById('canvas');
const ctx = el.getContext('2d');

// first the contour
ctx.globalAlpha = 0.2;
ctx.beginPath();
ctx.rect(0,400);
ctx.fill();

// now the hole
ctx.globalCompositeOperation = 'destination-out';
ctx.globalAlpha = 1;
ctx.beginPath();
ctx.rect(100,200);
ctx.fill();

canvas { border: 1px solid; }

<canvas id="canvas" class="canvas" width="400" height="400"></canvas>

但是如果由于某些原因您甚至无法做到这一点，那么最后的解决方法是使用第二个画布，在其上绘制形状并通过drawImage()进行合成，这不是受此错误影响：

const el = document.getElementById('canvas');
const ctx = el.getContext('2d');
const copy_ctx= el.cloneNode().getContext("2d");

ctx.beginPath();
ctx.beginPath();
ctx.rect(100,200);
ctx.fill();

copy_ctx.beginPath();
copy_ctx.rect(0,400);
copy_ctx.fill();

// we can set the alpha either here or while drawing
// on copy_ctx,it doesn't change much,both work
ctx.globalAlpha = 0.2;
ctx.globalCompositeOperation = 'source-out';
ctx.drawImage(copy_ctx.canvas,0);

canvas { border: 1px solid; }

<canvas id="canvas" class="canvas" width="400" height="400"></canvas>