连接处对阿拉伯语文本的描边效应

Question

简单地说，我在html5 2D画布中对阿拉伯语文本执行简单的笔画操作时遇到问题。

阿拉伯语文本具有这样的属性，即当它们彼此相邻时，它们会改变形式并合并在一起。显然，js如何处理文本笔划是通过自己获取每个角色并分别对它们进行操作。当字符随后呈现在屏幕上时，字符的边界变得可见，导致关节处的笔划颜色泄漏。

左边是Javascript的笔画功能产生的结果。右侧是使用Photoshop（不同字体）创建的正确结果。

有解决方法吗？

Answer 1

您的问题可能是您在已填充的版本之上绘制了描边版本。

反过来，一切都会如你所愿：

var ctx = c.getContext('2d');
ctx.font = "200px Al Tharikh, Arial"
var txt = 'مثال';

ctx.textBaseline = 'top';

// change the stroke style
ctx.strokeStyle = 'red';
ctx.lineWidth = 5;

// first draw the stroke
ctx.strokeText(txt , 100, 0);

// then draw the fill
ctx.fillText(txt , 100, 0); 

<canvas id="c" height="200" width="500"></canvas>

Ps：如果你只想获得外部笔画，那么你可以使用globalCompositeOperations：

var ctx = c.getContext('2d');
ctx.font = "200px Al Tharikh, Arial"
var txt = 'مثال';

ctx.textBaseline = 'top';

// change the stroke style
ctx.strokeStyle = 'red';
ctx.lineWidth = 5;


// first draw a larger stroke
ctx.strokeText(txt , 100, 0);

// then set the gCO
ctx.globalCompositeOperation = 'destination-out';

// then draw the filled version which will act as an "eraser"
ctx.fillText(txt , 100, 0);

// reset the gCO
ctx.globalCompositeOperation = 'source-over';

canvas{background: ivory;}

<canvas id="c" height="200" width="500"></canvas>