Question

基本文字笔画。

<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
  var x = 80;
  var y = 110;

  context.font = '100pt arial';
  context.lineWidth = 37;
  context.strokeStyle = "rgba(255,0,0,0.5)";
  context.strokeText('Ho', x, y);
</script>

Chrome和Firefox中的输出是：

＆＃39; H＆＃39;之间的重叠区域。和＆＃39; o＆＃39;比非重叠区域暗。我希望笔划文本具有相同的不透明度/ alpha。

我在Mac系统上的Safari中尝试过，并没有出现这样的问题。在safari中，我对重叠和非重叠区域都有统一的不透明度/ alpha。

我需要理解为什么在chrome中会发生这种情况，我应该怎么做才能获得统一的不透明度/ alpha。

Answer 1

行为不是预期的，一个人希望成为单一路径的一部分的strokeText调用，并且会认为它是Chrome和Firefox中的一个错误。

然而，你需要一个解决方案。我唯一能想到的就是创建第二个画布。在该画布上渲染没有不透明度的文本，然后使用ctx.globalAlpha = 0.5

将该画布渲染到原始画布上

实施例。

var canvas = document.createElement("canvas");
canvas.width = 500;
canvas.height = 500;
var ctx = canvas.getContext("2d");
document.body.appendChild(canvas);
var x = 40;
var y = 110;
ctx.font = '100pt arial';
ctx.lineWidth = 20;
ctx.fillRect(10,y,500,10);
ctx.strokeStyle = "rgba(255,0,0,0.5)";
ctx.strokeText('Bad', x, y);


var workCan = document.createElement("canvas");
workCan.width = canvas.width;
workCan.height = canvas.height;
var ctx1 = workCan.getContext("2d");
ctx1.font = '100pt arial';
ctx1.lineWidth = 20;
ctx1.strokeStyle = "rgba(255,0,0,1)";
x = 40;
y = 260;
ctx1.strokeText('Good', x, y);
ctx.fillRect(10,y,500,10);
ctx.globalAlpha = 0.5;
ctx.drawImage(workCan,0,0);

Answer 2

您可以使用带有 alpha 值的普通 CSS 渐变，并且 alpha 不会相加：

background: -webkit-linear-gradient(top, rgba(10, 14, 15, 0.3), rgba(10, 14, 15, 0.3));
    -webkit-background-clip: text;
    -webkit-text-stroke: 1vw transparent;

HTML5 Canvas Text Stroke在chrome中提供了不必要的重叠，但在Safari中工作正常

2 个答案: