Question

我在html中有一个带有以下css的文本：

＆＃13;

.overlay-imageOrientation-left {
  font-size: 20px;
  text-orientation: upright;
  writing-mode: vertical-rl;
  color: #ffffff;
  position: absolute;
  top: 45%;
  left: 3px;
}

＆＃13;

如何在画布html5中以文本方向绘制此文本：竖直和书写模式：vertical-rl？

Answer 1

通常，你必须分别绘制每个角色：

string.Format("{0}", any_object_here);
//or
$"{any_object_here}";

ctx = c.getContext('2d');
// set the font to 20px and line-height to 1
ctx.font = '20px/1 sans-serif';
ctx.textAlign = "center";
var str = "Hello World";
for(var i=0; i<str.length; i++){
  ctx.fillText(str[i], 20, 20*(i+1));
}

但是有些浏览器（实际上现在只有Firefox，我会在chrome上打开一个关于它的问题），也接受你直接在canvas元素上设置这些确切的CSS属性：

<canvas id="c" height=300></canvas>

ctx = c.getContext('2d');
ctx.font = '20px/1 sans-serif'
ctx.fillText('Hello World', 20,20);

canvas{
  text-orientation: upright;
  writing-mode: vertical-rl;
}

绘制一个方向垂直的文本，模式在canvas html5中是vertical-rl

1 个答案: