html - 创造基于 HTML5 的文本编辑器

Question

我正在使用 HTML5 画布制作一个文本编辑器，通过它我可以更新文本、更改字体、移动字体和移动背景图像。

我需要有关在画布中移动文本的帮助 - 如何使用带有鼠标移动事件的上下文来完成？

Answer 1

画布本身的 w3c 草案建议不要这样做。您可以在画布最佳实践中阅读此内容

Authors should avoid implementing text editing controls using the canvas 
element. Doing so has a large number of disadvantages

[...]

This is a huge amount of work, and authors are most strongly encouraged 
to avoid doing any of it by instead using the input element, the textarea 
element, or the contenteditable attribute.

如果您需要文本编辑器，您可以查看其他免费计划，例如CodeMirror

Answer 2

Edit: This answer was written in 2012. Modern web browsers have come long way since then and the answer no longer holds true. Google Docs and Visual Studio Code both use <canvas> based editing. Leaving this answer here just for the sake of the historical purpose. Here is a good thread on Hacker News on the topic.

Using HTML5 <canvas> for text edit is not recommended approach (see the answer above fom jbalsas). Mozilla Bespin (Skywriter) was an attempt until it was closed down and the development moved to non-<canvas> based ACE editor:

https://mozillalabs.com/en-US/skywriter/

http://ace.ajax.org/

Atom editor choose non-canvas approach, ultimately settling on React.js to speed up DOM update process:

http://blog.atom.io/2014/07/02/moving-atom-to-react.html

However <canvas> based editing is possible even if not recommended, see the comments below and the comment from jeromeyers:

http://earwicker.com/carota/

... also this blog post contains some ideas when DOM based text editing might not work.