HTML5 canvasで文字幅に合わせて拡大

前へ 次へ
このQ&Aのポイント
  • HTML5 canvasを使用して、テキスト内容の文字幅に合わせて表示幅を広げる方法について教えてください。
  • canvasのwidthを変更するか、canvas2Dオブジェクトのwidthを変更するかでテキスト内容を全て表示させることができますか？
  • HTML5 canvasを使用して、テキスト内容の文字幅に応じて表示幅を広げ、全てのテキストを表示させる方法について教えてください。
回答を見る
  • ベストアンサー

HTML5 canvasで文字幅に合わせて拡大

・HTML5 canvasで以下のようなことをやりたいのですが、可能でしょうか？ ・もし可能ならどうやるのでしょうか？ ■前提 ・canvas設定。width10px ・canvas2Dオブジェクト取得 ・文字「hogehoge」表示 ■やりたいこと ・この時、テキスト内容の文字幅に応じて、表示幅を広げ、全てを表示させるためにはどうすれば良いでしょうか？ ■分からないこと ・テキスト内容を全て表示させるためには、canvas2Dオブジェクトのwidthを変更するのでしょうか？ ・それとも、canvasのwidth自体を変更するのでしょうか？ ・canvasのwidthより、canvas2Dオブジェクトのwidthが大きかったらどうなるのでしょうか？

  • re97
  • お礼率80% (601/744)

質問者が選んだベストアンサー

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.2

＞canvasのwidthより、canvas2Dオブジェクトのwidthが大きかったらどうなるのでしょうか？ 何もおきません。canvas2Dに概念上の制限はないはずなので、canvasの領域でトリミングされるだけです。 ＞それとも、canvasのwidth自体を変更するのでしょうか？ 描画してからcanvasのサイズを変更すると、座標の対応関係が変わるのでご質問の意図のようなことにはならないと思います。 無理やりやるなら、サイズを先にセットしてから再描画するか、canvas要素をoverflow:hiddenのDIVなどでラップしておいてそちらのサイズを変更することでコントロールするかでしょう。 canvasに描画した内容は図化されるので、サイズを調べたいのであれば、スクリプトでスキャンしてサイズを調べることになるでしょう。 でも、扱う対象がテキストであるのなら、そんな面倒なことをしなくても、HTMLのspan要素やdiv要素を利用した方が遥かに扱いが簡単だと思いますが・・・

re97
質問者

お礼

回答ありがとうございました ＞何もおきません。canvas2Dに概念上の制限はないはずなので、canvasの領域でトリミングされるだけです ・参考になりました ＞扱う対象がテキストであるのなら、そんな面倒なことをしなくても、HTMLのspan要素やdiv要素を利用した方が遥かに扱いが簡単だと思いますが・・・ ・アドバイスありがとうございましたー

その他の回答 (1)

noname#206842
noname#206842
回答No.1

width:10px　という意味がわからない！ １文字分がやっとでは？？？ autoにするか、文字サイズx文字数の幅+paddingのpx数　をとる必要があるのでは？？？ line-heightも必要になるとおもうけど？・・・ 指定した領域外の表示はできない！ 視覚的にはみえない！これをうまく利用する方法も考えられるが？・・・

re97
質問者

お礼

回答ありがとうございましたー

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • html5canvasの文字枠のずれ

    html5のcanvasで、枠付きの文字列を描画しようとしたら、表示がおかしくなったのですが、理由がわかりません。ブラウザはchromeです。 一部のフォントとサイズのときだけ起きるのですが、それ以外で作れば問題ないのでしょうか。 <canvas id="canvas" width="500" height="500"></canvas> <script type="text/javascript"> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext('2d'); ctx.lineWidth=2; ctx.font = "bold 22px 'ＭＳ　Ｐ明朝'" ctx.strokeStyle = 'rgba(255, 0, 0, 1)'; ctx.fillStyle = 'rgba(0, 0, 0, 1)'; ctx.strokeText("aa0.3", 10, 25); ctx.fillText("aa0.3", 10, 25); </script>

  • HTML5　Canvasそのものの原点の指定方法

    お世話になります HTML5のcanvasタグについて教えてください 例えば <canvas id="target" style="border: 5px solid gray" width="200" height="400"></canvas> と書くと200[px]x400[px]の枠が付いたキャンバスがウィンドウの左上の隅の方にできるかと思います。 このキャンバス枠をウィンドウの真ん中あたりに表示させたいので Canvasの原点をずらしたいのですが、どうやったらいいのでしょうか ご回答くださいますようお願いします

    • ベストアンサー
    • HTML
  • HTML5のcanvasで描画がされない

    HTML5のcanvas要素を使って描画をしようとしたのですが、図形が表示されません。 コードは以下の通りです。 ・index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>canvasで図形を描く</title> <script type="text/javascript" src="paint.js"></script> </head> <body onLoad="draw()"> <canvas id="mycanvas"width="800" height"800"> </canvas> </body> </html> ・paint.js function draw() { //描画コンテキストの取得 var canvas = document.getElementById('mycanvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.arc(180,150,20,Math.PI*1,Math.PI*2,true); } } このコードでは(180,150)の位置に半径20の円が描画されるはずなのですが、何も表示されませんでした。 どこかコードに誤りがあるのでしょうか？ よろしくお願いします。

  • IEの「explorercanvas」で作ったCANVASがスクロール

    IEの「explorercanvas」で作ったCANVASがスクロール出来ない HTML5の<canvas>要素を、擬似的に使えるようにした「explorercanvas」↓ http://code.google.com/p/explorercanvas/ ですが、これを使って<canvas>要素を<div>要素の中に配置したんですが、 親の<div>ボックスをスクロールしても、canvasがスクロールされません。 本物の<canvas>要素はちゃんと出来ます。（FirefoxとChromeで確認） 何か代替策ないでしょうか？（canvas内に再描画しろってか..） （実験したコード） <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Canvas Test</title> <style type="text/css"> </style> <!--[if IE]><script src="/jslib/excanvas.js"></script><![endif]--> </head> <body> <p>CANVAS</p> <h2 style="text-align:center">Canvas TEST By HTML5 or IE(excanvas.js)</h2> <div id="hoge" style="width;500px;overflow:scroll;border:solid 1px gray"></div> <p>イメージ</p> <div id="fuga" style="width;500px;overflow:scroll;border:solid 1px gray"></div> <script type="text/javascript"> //CANVASの場合 　var container1 = document.getElementById("hoge"); 　var canvas = document.createElement("canvas"); 　canvas.width = 2000; 　canvas.height = 500; 　container1.appendChild(canvas); 　if (typeof(G_vmlCanvasManager) != 'undefined') 　 canvas = G_vmlCanvasManager.initElement(this.canvas); 　var ctx = canvas.getContext('2d'); 　var img = new Image(); 　img.src = "/image/mio.jpg" + "?" + new Date().getTime(); 　 img.onload = function() { 　　　ctx.drawImage(img,0,0,2000,500); 　 } 　container1.scrollLeft = 500; //imgの場合 　var container2 = document.getElementById("fuga"); 　var img2 = new Image(); 　img2.src = "/image/yui.jpg" + "?" + new Date().getTime(); 　img2.style.width="2000px"; 　img2.style.height="500px"; 　container2.appendChild(img2); 　container2.scrollLeft = 500; </script> </body> </html>

  • HTMLでテーブル幅を固定しても文字が折り返せない

    HTMLのテーブル幅を文字が突き抜けて幅が広がってしまって困っています。 例としては以下のような連続した文字が入った場合です。 <table width="150"> <tr><td width="150">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaあいおえう </td></tr> </table> どなたか、適切に折り返すにはどうしたらよいかご存知の方おりましたら、おしえてください。

    • ベストアンサー
    • HTML
  • HTMLで改行されません

    下記のように書いた場合、２バイト文字（たたたたたたたたたたた～）は200pxの幅で改行して表示されますが、 １バイト文字（aaaaaaaaaaaaaaaaaaaa～）は改行されず200pxの幅を越えて表示されます。 １バイト文字も改行されるようにするにはどうしたらいいんでしょうか？ HTML------------------------- <div id="div1"> <p>たたたたたたたたたたたたたたたたたたたたたたたたたききききききききききききききききききききききききききき</p> <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> たたたたたたたたたたたたたたたたたたたたたたたたたききききききききききききききききききききききききききき aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </div> css--------------------------- #div1 { width: 200px; height: 300px; background: #00ffff; }

    • ベストアンサー
    • CSS
  • HTML（画像の幅や高さの設定について）

    HTMLで画像の幅(width)や高さ(height)を設定する際、 次のようにピクセル「px」は省略してもよろしいのでしょうか？ 【例】<img src="images/logo.gif" width="200" height="300">

  • PanelとCanvasの違いについて

    i-appliでちょっとしたアプリを作成する事になりただいま勉強中です。 初歩的な質問です。 高APIのPanelクラスと低APIのCanvasクラスの違いについて質問です。 まず、Panelにおいて、ラベルテキストの表示場所を設定するといったことはできるのでしょうか？ PanelとCanvasは一緒には使用できないという事をネット上でみかけたのですが、 例を出すとCanvasにリストボックスは表示できないといったことでしょうか？ Panelにgif画像を左端に表示してその同列上にテキストを表示し、下部にリストボックスを表示しようとしています。Canvasではこのような表示はできないと思いますが、かといってPanelだとCanvasのようにテキスト位置などを座標で指定するといった事が現状の知識では無理だと思うのですが、実際のところこのような場合、 どのように作成していけばいいのでしょうか？わかりにくいかもしれませんがよろしくお願い致します。

  • 固定幅div内のテーブルセルの幅指定方法

    幅を指定して横スクロールバーを有効にしたdivがあります。 その中に、divよりも幅の広いtableを置き、thやtdの幅を指定したいのですが、有効になりません。 tableへの幅指定は有効になるのですが、内容が動的に変化するので、セル単位で幅を指定したいと思っています。 解決方法がありましたらお願いいたします。 HTML：標準モード UA：Windows xp IE6 サンプルコード： <style> div{ height:200px; width:200px; overflow-x:scroll; border:#f99 solid 1px; } table{ background:#ddd; border:#666 solid 1px; } td{ width:100px; border:#666 solid 1px; } </style> <div> <table> <tr> <td>サンプルテキスト</td> <td>サンプルテキスト</td> <td>サンプルテキスト</td> <td>サンプルテキスト</td> <td>サンプルテキスト</td> <td>サンプルテキスト</td> </tr> </table> </div>

    • ベストアンサー
    • HTML
  • HTML CSS　文字幅の固定

    現在HTMLで文書を表示しているのですが、その文書の横幅を固定したいのです。 ただ、横幅は文字数で固定したいのです。 現在はひらがなで３３文字固定はできています。これは無理やりCSSのWidthで幅をピクセル単位で固定しています。 ですが、この場合だと漢字を入力すると３３文字の横幅固定ができません。 おそらく漢字には微妙な余白が設定されているのだと思うのですが、この漢字を入力した場合でも横幅の文字数で固定することが可能でしょうか？

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する