创建基于<canvas>的HTML5文本编辑器</canvas>

Question

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

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

Answer 1

画布的w3c草案本身建议不要这样做。您可以在canvas best practices

中阅读此内容

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

建议不要使用HTML5 <canvas>进行文本编辑（请参阅上面的回答fom 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/

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