コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > H5 チュートリアル > HTML5 でテキストの配置を実現する方法のまとめ Canvas_html5 チュートリアル スキル

HTML5 でテキストの配置を実現する方法のまとめ Canvas_html5 チュートリアル スキル

WBOY
リリース： 2016-05-16 15:51:59
オリジナル
1798 人が閲覧しました

テキストを配置水平方向に配置

JavaScript コードコンテンツをクリップボードにコピーします
  1. context.textAlign="center|end|left|right|start";
それぞれの値と意味は以下のとおりです。

直感的に感じられるように例を挙げてみましょう。

JavaScript コードコンテンツをクリップボードにコピーします
  1.   
  2. "zh">   
  3.   
  4.     "UTF-8">   
  5.     textAlign   
  6.        
  7.   
  8.   
  9. "canvas-warp">   
  10.     "canvas">   
  11.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
  12.        
  
  • <スクリプト>   
  • window.onload = 関数(){
  • var canvas = document.getElementById("canvas");   
  • canvas.width = 800;   
  • canvas.height = 600;   
  • var context = canvas.getContext("2d");   
  • context.fillStyle = "#FFF";   
  • context.fillRect(0,0,800,600);   
  • // 在位置 400 创建蓝線
  • context.ストロークスタイル="青";   
  • context.moveTo(400,100);   
  • context.lineTo(400,500);   
  • context.ストローク();   
  • context.fillStyle = "#000";   
  • context.font="50px Arial";   
  • // 表示異なる textAlign 值
  • context.textAlign="開始";   
  • context.fillText("textAlign=start", 400, 120);   
  • context.textAlign="終了";   
  • context.fillText("textAlign=end", 400, 200);   
  • context.textAlign="左";   
  • context.fillText("textAlign=left", 400, 280);   
  • context.textAlign="センター";   
  • context.fillText("textAlign=center", 400, 360);   
  • context.textAlign="右";   
  • context.fillText("textAlign=right", 400, 480);   
  • };   
  •   
  •   
  •   

    • 実行結果:
    2016324114332033.jpg (850×500)

    textBaseline を垂直に揃えます

    JavaScript コードコンテンツをクリップボードにコピーします
    1. context.textBaseline="アルファベット|上|吊り下げ|中|表意文字|下"
      2. ;

    それぞれの値と意味は以下のとおりです。

    值 描述
    alphabetic 默认。文本基线是普通的字母基线。
    top 文本基线是em方框的顶端。
    hanging 文本基线是悬挂基线。
    middle 文本基线是em方框的正中。
    ideographic 文本基线是表意基线。
    bottom 文本基线是em方框的底端。

    まず、各ベースラインが表す位置を写真で見てみましょう。
    2016324114358024.gif (600×268)

    直感的に感じられるように例を挙げてみましょう。

    JavaScript コードコンテンツをクリップボードにコピーします
    1.   
    2. "zh">   
    3.   
    4.     "UTF-8">   
    5.     textBaseline   
    6.        
    7.   
    8.   
    9. "canvas-warp">   
    10.     "canvas">   
    11.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
    12.        
  • <スクリプト>
  • window.onload = function(){
  • var Canvas = document.getElementById("canvas");
    • Canvas.width = 800;
    • Canvas.height = 600;
  • var context = Canvas.getContext("2d"); context.fillStyle =
    • "#FFF"
  • ; context.fillRect(0,0,800,600);
  • //位置 y=300 に青い線を描画
  • context.ストロークスタイル="青"
    • ;
  • context.moveTo(0,300); context.lineTo(800,300);
  • context.ストローク();
  • context.fillStyle =
    • "#00AAAA"
  • ;
    • context.font=
  • "20px Arial";
  • //異なる textBaseline 値を使用して各単語を y=300 に配置します
  • context.textBaseline=
    • "トップ"
  • ; context.fillText("トップ"
    • ,150,300);
  • context.textBaseline="下";
    • context.fillText(
  • "下",250,300); context.textBaseline=
    • "中"
  • ; context.fillText("中"
    • ,350,300);
  • context.textBaseline="アルファベット";
    • context.fillText(
  • "アルファベット",450,300); context.textBaseline=
    • "ハング"
  • ; context.fillText("ハンギング"
    • ,550,300);
  • };

  • 実行結果:
    2016324114419550.jpg (850×500)

    • 関連ラベル：
    canvas html5 文章
    ソース：php.cn
    前の記事：HTML5 模倣モバイル WeChat チャット インターフェイス_html5 チュートリアル スキル 次の記事：HTML5 Canvas API_html5 の Clip() メソッドを使用して領域画像をトリミングするチュートリアルのヒント
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    著者別の最新記事
    最新の問題
    ページのメインディスプレイに画像を表示するにはどうすればよいですか? 私がやりたいのは、NASAAPI を使用して写真を受信することです。これらの写真は、マイページのサムネイルとメインディスプレイに表示されます。コードがサムネイルから画像を取得してペ...
    から 2024-04-06 15:33:12
    0
    1
    433
    PDF ファイルは HTML5 と JavaScript を実行できますか? PDF に埋め込まれるため、どのコンピュータでもブロックされないプログラムを作成してみようという愚かな考えがあります (JavaScript は PDF 内で実行できると聞きました...
    から 2024-04-05 12:57:00
    0
    1
    456
    HTML5 の enctype と formenctype の違いは何ですか? HTMLLivingStandard (別名、新しい HTML5 仕様) の属性 enctype と formenctype の違いは何でしょうか?私は HTML Standard...
    から 2024-04-02 11:47:56
    0
    1
    275
    ページをモバイル対応にしますか? たくさんの Web ページといくつかの Web サイトがあります。問題は、私は初心者だということです。基本的な html5 と css3 を使用していますが、それらをスケールアップ...
    から 2024-04-01 20:42:38
    0
    1
    259
    関連トピック
    詳細>
    人気のおすすめ
    人気のチュートリアル
    詳細>
    関連するチュートリアル
    人気のおすすめ
    最新のコース
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート