在画布上制作交互式文本区域

Question

我想在画布上绘制交互式文本区域。很不错，使用ID和类我们可以更改div CSS属性，但是使用画布我如何实现相同的功能。

我想在canvas的顶部写文本，这些文本应该在某些文本区域的变化事件上发生变化。我希望使用菜单栏来实现更改font-color，font-size，font-family等功能。

与div id和类我可以更改CSS但在画布上我怎么能实现这？请建议？

Answer 1

您可以控制在绘制文本相同的命令文本XY位置：context.fillText("test",20,25);

您可以控制字体大小和字体的家庭是这样的：context.font="14pt Verdana".

您使用填充像这样控制文本颜色：context.fillStyle="gold".

您可以像这样控制不透明度：context.globalAlpha=.80。 （0.00 =不可见，1.00 =完全不透明）。

你使用这样的变换控制文本旋转：

context.save(); 
context.rotate(30*Math.PI/180); 
context.fillText("Test",20,20); 
context.restore(); 

你将不得不这些使用自己的自定义编码（一些容易，一些温和的）来控制：

• 行间距，
• 字符间距
• 文本对齐
• 下划线
• 文字的路径（曲文）
• 从右到左排列

没有斜体（除非字体有斜体字符）的能力。