Question

我试图写一些从指定半径向外辐射的文字。

换句话说，我试图以圆形图案书写文字，但是从som定义的内半径向外辐射。

编辑：我尝试在此示例中的行之间写入文字：http://mandelid.com/code/wheel/

Answer 1

明智地使用上下文转换，你就完成了。

步骤：
•翻译到圆心。
•按角度旋转上下文
•水平翻译以到达文本的开头
•绘制文字。

var cv = document.getElementById('cv');
var ctx = cv.getContext('2d');

function drawText(txt, x, y, angle, radius) {
  ctx.textAlign = 'left';
  ctx.textBaseline = 'middle';
  ctx.save();
  ctx.translate(x, y)
  ctx.rotate(angle);
  ctx.translate(radius, 0);
  ctx.fillText(txt, 0, 0);
  ctx.restore();
}

drawText('Hello Folks', 100, 100, -Math.PI / 4, 20);

drawText('How are you ?', 100, 100, Math.PI / 4, 20);

<canvas width=300 height=200 id='cv'></canvas>

带有html5画布的径向文本

1 个答案: