Question

我需要在HTML5画布上的精确位置绘制一个阿拉伯语和英语文本字符串。

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

//Draw rextangle.
ctx.strokeStyle = "red";
ctx.rect(75,20,150,80);

//Text right align
ctx.font = "15px Arial";    
ctx.textAlign = "right";  

var x = 70 + 150 ; // the end of rectangle ( X + Rectangle Width )
ctx.fillText("text in english",x, 70);              
ctx.fillText("النص باللغه العربيه",x, 90);

ctx.stroke();

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

当文本为英文时，它将以x开头，并且即使文本较长，也不会超过或小于它。但是，如果文本是阿拉伯语，则不会从特定的x开始！并且每次文本移动超过x且小于x时，为什么它不是像英语一样不静态的？尝试用阿拉伯语写长或短文字，看看会发生什么。 this me code in JS Fiddle 我需要解决这个问题。

Answer 1

您可以在画布中更改每个字符串的方向。

...
ctx.fillText("text in english",x, 70);
c.setAttribute('dir','rtl');
ctx.fillText("النص باللغه العربيه",x, 90);
...

将文本向右对齐时，画布上的文本位置在阿拉伯语和英语之间是不同的

1 个答案: