时间戳

首页 > 解决方案 > 将文本向右对齐时，画布上的文本位置在阿拉伯语和英语之间是不同的

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

问题描述

我需要在 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 开始，并且即使文本为 any long 也不会超过或小于它。但是，如果文本是阿拉伯语，它将不会从特定的 x 开始！并且每次文本都会移动到小于 x ，为什么它不像英语那样是静态的？尝试用阿拉伯语写长文本或短文本，看看会发生什么。 这个我在 JS Fiddle 中的代码 我需要解释来解决这个问题。

标签： htmlcanvas

解决方案

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

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

推荐阅读