HTML5 Canvas笔画文本重叠连接部分，使用阿拉伯语，北印度语，孟加拉语等语言

debugcn 发表于 Dev

只有Alom Ador

用阿拉伯语，北印度语，孟加拉语等语言书写时，每个字母彼此相连。但是在HTML5 Canvas textStroke中，这些笔划没有合并。有什么方法可以连接这些重叠的连接点？

图片：连接零件重叠的问题

图片：这些连接部件应连接在一起

var arabic = document.getElementById("arabic");
var ctx = arabic.getContext("2d");
ctx.font = "100px Georgia";
ctx.lineWidth = 3;
ctx.strokeText(" اَلْعَرَبِيَّةُ ", 10, 100);


var hindi = document.getElementById("hindi");
var ctx = hindi.getContext("2d");
ctx.font = "100px Georgia";
ctx.lineWidth = 3;
ctx.strokeText("हिन्दी", 10, 100);

var bengali = document.getElementById("bengali");
var ctx = bengali.getContext("2d");
ctx.font = "100px Georgia";
ctx.lineWidth = 3;
ctx.strokeText("বেঙ্গলি", 10, 100);

JSFiddle示例：https：//jsfiddle.net/qa9t64bd/

只有Alom Ador

自定义阴影滤镜无需解决此问题。只需添加ctx.globalCompositeOperation = "destination-out";，然后添加fillText。它将自动剪辑文本笔触和fillText。

var arabic = document.getElementById("arabic");
var ctx = arabic.getContext("2d");
ctx.font = "100px Georgia";
ctx.lineWidth = 8;
ctx.strokeText(" اَلْعَرَبِيَّةُ ", 10, 100);
ctx.globalCompositeOperation = "destination-out";
ctx.fillText(" اَلْعَرَبِيَّةُ ", 10, 100);


var hindi = document.getElementById("hindi");
var ctx = hindi.getContext("2d");
ctx.font = "100px Georgia";
ctx.lineWidth = 8;
ctx.strokeText("हिन्दी", 10, 100);
ctx.globalCompositeOperation = "destination-out";
ctx.fillText("हिन्दी", 10, 100);

var bengali = document.getElementById("bengali");
var ctx = bengali.getContext("2d");
ctx.font = "100px Georgia";
ctx.lineWidth = 8;
ctx.strokeText("বেঙ্গলি", 10, 100);
ctx.globalCompositeOperation = "destination-out";
ctx.fillText("বেঙ্গলি", 10, 100);

canvas {
  background: #FFFF00;
}

<canvas id="arabic" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<canvas id="hindi" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<canvas id="bengali" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

的jsfiddle链接- https://jsfiddle.net/1nc5owp7/1/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。