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

Question

我想在画布上绘制交互式文本区域。非常，使用id和类我们可以更改div css属性但是使用canvas我怎样才能实现相同的功能。

我想在画布上写文字，这应该改变某些文本区域的更改事件。我希望使用菜单栏来实现更改字体颜色，字体大小，字体系列等功能。

使用div id和class我可以改变css但是在画布上我怎么能实现这个？请提出建议？

1 个答案:

答案 0 :(得分：0)

您可以在绘制文本的同一命令中控制文本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();

您必须使用自己的自定义编码控制这些（一些简单，一些温和）：

• 行间距，
• 字符间距，
• 文字对齐，
• 下划线
• 路径上的文字（曲线文字）
• 从右到左的方向

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

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();

您必须使用自己的自定义编码控制这些（一些简单，一些温和）：

• 行间距，
• 字符间距，
• 文字对齐，
• 下划线
• 路径上的文字（曲线文字）
• 从右到左的方向

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