创建基于<canvas>的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

编辑：这个答案写于 2012 年。从那时起，现代网络浏览器已经取得了长足的进步，答案不再成立。Google Docs 和 Visual Studio Code 都使用<canvas>基于编辑。将此答案留在这里只是为了历史目的。这是黑客新闻上关于该主题的一个很好的帖子。

不推荐使用 HTML5<canvas>进行文本编辑（请参阅上面的 jbalsas 答案）。Mozilla Bespin (Skywriter) 是一个尝试，直到它被关闭并且开发转移到非<canvas>基于 ACE 编辑器：

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

http://ace.ajax.org/

Atom 编辑器选择非画布方法，最终选择 React.js 来加速 DOM 更新过程：

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

然而，<canvas>即使不推荐，基于编辑也是可能的，请参阅下面的评论和 jeromeyers 的评论：

http://earwicker.com/carota/

...这篇博文还包含一些当基于 DOM 的文本编辑可能不起作用时的想法。