交界处对阿拉伯文本的描边效果

Question

简而言之，我在 html5 2D canvas.

中对阿拉伯文文本执行简单笔划操作时遇到问题

阿拉伯语文本中有这样属性个字符，当它们彼此相邻时会改变形式并合并在一起。很显然，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>

交界处对阿拉伯文本的描边效果

Stroke Effect on Arabic Text At Junctions

html5-canvas

fabricjs

stroke