具有从右到左字符串的HTML5 Canvas fillText

我试图在 HTML5 Canvas’2d Context上使用fillText()方法来绘制用阿拉伯语编写的字符串.它完美地工作,直到我在字符串的末尾加上一个标点符号.然后标点符号出现在字符串的错误一侧(在开头,而不是结尾,就好像它是一个不是rtl字符串的ltr).我使用了Context.textAlign属性,但这似乎只涉及相对于指定位置绘制字符串的方式,而不是文本的实际方向.有谁知道这个解决方案？

谢谢.

更新：我找到的答案是在页面上的canvas元素中添加“dir”属性.例如,

<canvas dir="rtl">

但是,我仍然不知道如何更改发送到fillText的单个字符串的dir属性.有任何想法吗？

解决方法

您无需为每个单独的字符串设置方向.请参阅以下示例,该示例还显示了正确显示顺序的隐式bidi控制标记的正确使用：

<html>
<head>
  <Meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

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

    <script type="text/javascript" charset="utf-8">
      var c = document.getElementById("myCanvas");
      var cArabic = c.getContext("2d");
      cArabic.font="25px Arial";

      // Simple Sentence with punctuation.
      var str1 = "این یک آزمایش است.";
      // Few sentences with punctuation and numerals. 
      var str2 = "۱ آزمایش. 2 آزمایش، سه آزمایش & Foo آزمایش!";
      // Needs implicit bidi marks to display correctly.
      var str3 = "آزمایش برای Foo Ltd. و Bar Inc. باشد که آزموده شود.";
      // Implicit bidi marks added; "Foo Ltd.&lrm; و Bar Inc.&lrm;"
      var str4 = "آزمایش برای Foo Ltd.‎ و Bar Inc.‎ باشد که آزموده شود.";

      cArabic.fillText(str1,600,60);
      cArabic.fillText(str2,100);
      cArabic.fillText(str3,140);
      cArabic.fillText(str4,180);
    </script>

  </body>
</html>

这是输出：

具有从右到左字符串的HTML5 Canvas fillText

解决方法

猜你在找的HTML5相关文章