残念ながら、canvas要素はテキストを適切に処理しません。たくさんのアプローチがありますが(たとえばhttp://canvaspaint.org/blog/2006/12/rendering-text/を参照)、それらはほとんどハックのように見えます。クロスプラットフォームで、自分のフォントを思い通りに作成するための最も柔軟性のある方法で何ができますか?
2 に答える
http://typeface.neocracy.orgの typeface.js を見たことがありますか。文字を書くにはかなりしっかりしていると聞きます。ここに彼らのサイトからのものがあります:
「typeface.js は、ブラウザーのベクター描画機能を使用して HTML ドキュメントにテキストを描画します。しばらくの間、ブラウザーはベクター描画をサポートしていました。Firefox、Safari、Opera は<canvas>
要素 (および SVG) をサポートし、IE はサポートしています。 VML。
typeface.js プロジェクトには 2 つのコンポーネントがあります。フォントを変換するための perl モジュールと、ブラウザーで描画するための JavaScript ライブラリです。perl モジュールは、TrueType フォントからグリフ アウトライン情報を抽出し、そのデータを JSON 形式で書き込みます。次に、javascript ライブラリが HTML ドキュメントを走査し、<canvas>
または VML を使用してテキストをレンダリングし、グリフを描画します。
テキストをサポートするブラウザーで<canvas>
は選択可能ですが、信頼する必要があります。選択すると、フィードバックがなく、機能していることを知らせる強調表示もありません。今後の作業では、強調表示を使用してテキストを選択するための、より優れたクロスブラウザー サポートの実装を目指します。" ( http://typeface.neocracy.org/usage.htmlからの引用)
HTML5 テキスト メソッドを使用したい場合は、次のライブラリを試してみてください: http://code.google.com/p/canvas-text/ 私はメインの開発者なので、変更を非常に迅速に行うことができます。
デモはこちら: http://canvas-text.googlecode.com/svn/trunk/examples/index.html
まだアルファ段階なので、バグレポートやフィードバックは大歓迎です! :)