jquery - 在画布上创建交互式文本区域

Question

我想在画布上绘制交互式文本区域。正常情况下，使用 id 和类我们可以更改 div css 属性，但使用画布如何实现相同的功能。

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

使用 div id 和 class 我可以更改 css 但在画布上我怎么能做到这一点？请建议？

Answer 1

You control text XY position in the same command that draws text: context.fillText("test",20,25);

You control font size and font family like this: context.font="14pt Verdana".

You control text color using the fill like this: context.fillStyle="gold".

You control opacity like this: context.globalAlpha=.80. (0.00=invisible, 1.00=fully opaque).

You control text rotation using a transform like this:

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

You would have to control these using your own custom coding (some easy, some moderate):

• Line spacing,
• Character spacing,
• Text Alignment,
• Underlining,
• Text on path (curved text)
• Right to left orientation

There is no capability to italicize (unless the font has italicized characters).