基本文字笔画代码。
<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 中的输出是:
“H”和“o”之间的重叠区域比非重叠区域更暗。 我希望笔画文本具有相同的不透明度/alpha。
我在Mac系统的Safari中试过没有这个问题。在 safari 中，我为重叠和非重叠区域获得了统一的不透明度/alpha。
我需要了解为什么在 chrome 中会发生这种情况，以及我应该怎么做才能获得统一的不透明度/alpha。
最佳答案
行为不是预期的，strokeText 调用可能是单个路径的一部分，并且会认为它是 Chrome 和 Firefox 中的错误。
然而，您需要一个解决方案。我唯一能想到的就是创建第二个 Canvas 。在该 Canvas 上渲染不透明的文本，然后使用 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);
关于javascript - HTML5 Canvas Text Stroke 在 chrome 中产生不需要的重叠，但在 Safari 中工作正常，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40004412/